切换<h1>标记的填充

Question

我有一个h1标签和两个按钮:

<h1 id="id1">My Heading 1</h1>
<input id="button" type="submit" name="button" value="enter"/>
<input id="button2" type="submit" name="button" value="enter2"/>

是否有更好(或更短)的方式来做到这一点:

$('#button').on('click', function(){
    $('h1').css('padding-left', '50px')
    $('#button').css('display', 'none')
    $('#button2').css('display', 'block');
});

$('#button2').on('click', function(){
    $('h1').css('padding-left', '0px')
    $('#button').css('display', 'block')
    $('#button2').css('display', 'none');
});

注意:也许我不需要两个按钮而只需要一个按钮？

Answer 1

尝试,

HTML:

<h1 id="id1">My Heading 1</h1>
<input id="button" type="submit" name="button" value="enter"/>

JS:

$('#button').on('click', function(){
    $('h1').css('padding-left', function(_,val){
       return parseInt(val,10) == 0 ? 50 : 0;
    })
});

DEMO