jQuery有条件的添加和删除CSS属性

我有一个CSS border属性，当前位置（border-left：1px）和onClick，我通过下面的第一个jQuery函数删除它。如何设置这个以便第二个功能在第二次点击后重新添加属性？它应该每次点击来回切换。jQuery有条件的添加和删除CSS属性

$(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

来源

2012-01-08 Tony

难道是容易定义的CSS类：

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

然后使用jQuery的toggleClass

所以你的代码是：

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

然后，当点击它时，您将切换您的备用css类。如果没有别的，这应该让你指出正确的方向。

来源

2012-01-08 07:09:45

这是最好的办法，不是硬编码到CSS JavaScript文件要好得多。 – 2012-01-08 07:12:16

有趣。没有意识到'toggleClass'方法。 – xbonez 2012-01-08 07:14:58

@M_M不幸的是我无法让它工作。这是原始代码：http://jsfiddle.net/tonynggg/frnYf/12/ – Tony 2012-01-08 07:21:56

首先，创建具有边框类：

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

然后，

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

});

来源

2012-01-08 07:13:03 xbonez

这段代码不起作用。虽然它看起来像是正确的解决方案，但我想也许是因为“hasClass”不起作用，因为＃button-2不是类？ – Tony 2012-01-08 07:34:06

@Tony它工作得很好。请参阅jsfiddle：http://jsfiddle.net/H3mtx/1/ – xbonez 2012-01-08 08:20:28

jQuery有条件的添加和删除CSS属性

回答

相关问题