如何「切換全部」，並切換特定類別的元素？

-1

我想切換列表項的類的可見性，並切換所有列表項的可見性。在another stack overflow post的幫助下，我可以切換特定類別的列表項目。如何「切換全部」，並切換特定類別的元素？

這裏的Java腳本我有切換的列表項具體類別：

var switcher = [false, false, false]; 
var classes = ['easy', 'fun', 'silly']; 

$('.toggler').click(function() { 
    var x = $(this).hasClass('checked'); 
    switcher[$(this).data('switch')] = !x; 
    $(this).toggleClass("checked", !x); 
    $('li').each(function() { 
     var cur = $(this); 
     cur.addClass('hidden'); 
     $.each(switcher, function (index, data) { 
      if (data && cur.hasClass(classes[index])) { 
       cur.removeClass('hidden'); 
      } 
     }); 
    }); 
});

我說的基本功能隱藏和顯示所有列表項，但功能剎車個人類切換：

$('.select_all').click(function() { 
    $(".toggler").toggleClass("checked"); 
    $('li').toggleClass("hidden"); 
});

我該如何保持班級切換，並添加另一個切換所有項目的按鈕？

這裏有一個小提琴例如：http://jsfiddle.net/BMT4x/1/

來源

2014-01-23 user2888697

我不知道這是否是你想要做什麼，但它應該給你一個正確的方向推（至少我的方向走）。我更喜歡用類來打開所有東西。喜歡的東西：

<button class="toggler" data-class="easy">Easy</button>, 
<button class="toggler" data-class="fun">Fun</button>, 
<button class="toggler" data-class="silly">Silly</button>, 
<button class="toggler" data-class="all">Select All</button> 


<ul id="list"> 
    <li class="easy">Bowling</li> 
    <li class="fun">Balooning</li> 
    <li class="fun easy">Boating</li> 
    <li class="silly">Barfing</li> 
    <li class="easy fun">Bafooning</li> 
</ul>

的CSS：

#list li { 
    display: none; 
} 
#list.easy li.easy { 
    display: block; 
} 
#list.fun li.fun { 
    display: block; 
} 
#list.silly li.silly { 
    display: block; 
} 
#list.all li { 
    display: block; 
}

的JS：

$('.toggler').click(function() { 
    var category = $(this).data('class'); 
    $('#list').toggleClass(category); 
});

和參照用小提琴：http://jsfiddle.net/qLLYj/

來源

2014-01-23 23:14:47 Chad

我想你可能已經忘記了「一切」類添加到'li'元素？ – VIDesignz

@VIDesignz好，如果它顯示他們全部......他們不需要班級哈哈。 – Chad

我只是說基於你的腳本，切換全部按鈕什麼都不做。這就是全部...... – VIDesignz

您可以明確地添加/刪除類的通過秒，switch，參數toggleClass(see here)。

因此，您可以在單擊.select_all按鈕時更改所有單個開關和列表項的狀態。

$('.select_all').click(function() { 
    $('.select_all').toggleClass("checked"); 
    var allChecked = $('.select_all').hasClass("checked"); 
    switcher = [allChecked, allChecked, allChecked]; 
    $(".toggler").toggleClass("checked", allChecked); 
    $('li').toggleClass("hidden", !allChecked); 
});

做一些進一步的修改，以獲得更直觀的行爲（例如，如果全部選中，切換的點擊一個取消選擇.select_all以及本身;檢查所有個人切換意味着.select_all被自動選中）：

$('.toggler').click(function() { 
    var x = $(this).hasClass('checked'); 
    switcher[$(this).data('switch')] = !x; 
    $(this).toggleClass("checked"); 
    $('li').each(function() { 
     var cur = $(this); 
     cur.addClass('hidden'); 
     $.each(switcher, function (index, data) { 
      if (data && cur.hasClass(classes[index])) { 
       cur.removeClass('hidden'); 
      } 
     }); 
    }); 

    var allChecked = switcher.indexOf(false) < 0; 
    $('.select_all').toggleClass("checked", allChecked); 
});

小提琴：http://jsfiddle.net/ET33B/

來源

2014-01-24 00:11:59 David

如何「切換全部」，並切換特定類別的元素？

回答

相關問題