jQuery条件添加和删除CSS属性

Question

我现在有一个CSS边界属性(边框左: 1px)，onClick，我通过下面的第一个jQuery函数删除它。如何设置它，以便我的第二个函数在第二次单击时将属性添加回？它应该在每次点击中来回切换。

$(function(){
    $('#button').click(function() {    
        $('#button-2').css('border-left','none');
    });   
    $('#button').click(function() {
        $('#button-2').css('border-left','1px');
    });
});

我现在已经包含了原始代码：www.jsfiddle.net/tonynggg/frnYf/12

Answer 1

定义css类是否更容易：

.button { border-left: 1px; }
.buttonClicked { border-left: none; }

然后使用jQuery toggleClass

所以你的代码是：

$(function(){
    $('#button').click(function() {    
        $('#button-2').toggleClass('buttonClicked');
    });   
});

这将在单击off时将备用css类切换到off上。如果没有其他的话，这应该会让你指向正确的方向。

Answer 2

首先，创建一个具有边框的类：

.borderclass
{
   border-left:1px black solid;
}

然后,

$(function(){
$('#button').click(function() {    
    if ($('#button-2').hasClass('borderclass'))
        $('#button-2').removeClass('borderclass');
    else
        $('#button-2').addClass('borderclass');
    });   

});