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屬性

回答

相關問題