有條件的jQuery切換功能

我想隱藏並顯示基於其歸因類的列表項。有條件的jQuery切換功能

的問題是，某些列表中的項目有多個類。所以如果我切換一個類然後切換另一個類，那麼具有兩個選定類的任何項都將被刪除。

我創造了我的問題的演示：http://jsfiddle.net/a4NkN/2/

這裏的JS代碼：

$('#easy').click(function(){ 
    $(this).toggleClass("checked"); 
    $('.easy').toggle(); 
}); 

$('#fun').click(function(){ 
    $(this).toggleClass("checked"); 
    $('.fun').toggle(); 
}); 


$('#silly').click(function(){ 
    $(this).toggleClass("checked"); 
    $('.silly').toggle(); 
});

如果選擇「簡單」和「樂」按鈕，划船就會消失。

我該如何獲得划船？

來源

2014-01-21 user2888697

這可能是一個好點的開始。雖然你可以做到這一點更便宜，更清潔，給人的想法：

使用數組來保存您的選擇按鈕和一個對應的持有類名的地位。無論何時您點擊選擇按鈕，您都將所有元素設置爲不可見，並重新設置這些元素，這些元素已被其他按鈕或當前點擊選擇的元素重新選中，這些元素都保存在切換器陣列中。在這個小提琴

//saves whether button is active 
var switcher = [false, false, false]; 
//holds your classes selectable 
var classes = ['easy', 'fun', 'silly']; 

$('.toggler').click(function() { 
    // toogle the select button and save status 
    var x = $(this).hasClass('checked'); 
    switcher[$(this).data('switch')] = !x; 
    $(this).toggleClass("checked", !x); 

    // iterate through your elements to set them active if needed 
    $('li').each(function() { 
     var cur = $(this); 
     cur.addClass('hidden'); 
     $.each(switcher, function (index, data) { 
      if (data && cur.hasClass(classes[index])) { 
      cur.removeClass('hidden'); 
      } 
     }); 
    }); 
});

整體解決：http://jsfiddle.net/BMT4x/

來源

2014-01-21 23:07:02

使用解決方案的功能，是否有創建「全選」按鈕的方法，單擊該按鈕後，將顯示所有數據或隱藏數據，具體取決於所選內容？ – user2888697

這裏是全選按鈕將如何看一個例子，但是$（「SELECT_ALL。‘）點擊符$（’toggler。」）點擊：。http://jsfiddle.net/BMT4x/1/ – user2888697

我創建一個新的問題爲我的「切換所有」的困境.. http://stackoverflow.com/questions/21320946/how-do-i-toggle-specific-element-classes-and-also-toggle-all-elements – user2888697

基於按鈕過濾器中的一個點擊你不能無條件地切換元素，如果它是可能的元素以滿足一次多個過濾器。正確的做法是多一點參與。

由於您的checked類意味着只顯示與該按鈕相對應的項目，因此請按照按鈕的當前狀態切換它們。當且僅當相應按鈕由於點擊而出現checked時，應該顯示這些項目。

$('#easy').click(function(){ 
    $(this).toggleClass("checked"); 
    $('.easy').toggle($(this).is(".checked")); 
});

該代碼使用的.toggle最後一個版本，所述一個接受布爾參數。

它也可以更succintly完成：

$('.easy').toggle($(this).toggleClass("checked").is(".checked"));

來源

2014-01-21 21:34:38 Jon

我實際需要的正好相反：當按鈕被「選中」，與相應的班線項目應該是可見的。我更新了JSFiddle：http://jsfiddle.net/a4NkN/4/ ...謝謝... – user2888697

@ user2888697：我更新了答案以反映這一點，它只是反轉條件的問題。 – Jon

有條件的jQuery切換功能

回答

相關問題