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

Answer 2

或者只是在css类中填充并在h1上切换类。

<强> HTML

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

<强>的CSS：

h1.withPadding {
    padding-left: 50px;
}

<强> JS：

$('#button').on('click', function(){
    $('h1').toggleClass('withPadding');
});

<强> JSFiddle

Answer 3

试试这个

HTML：

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

Css：

.active {
    padding-left: 50px;
}

Js：

$("#button").click(function() {
    $('h1').toggleClass('active');
})

切换<h1>标记</h1>的填充

3 个答案:

DEMO