Question

我有这个jQuery脚本，它根据点击的项目选择（突出显示）和取消选择div ...

<script>
jQuery(document).ready(function($) {
    $links = $('.property');
    $links.click(function(e) {
        //Get our variables, simply $(this) and the colour
        var $this = $(this),
            color = $this.data('col');

        //Toggle the active class on this link
        $this.toggleClass('active');

        //Remove .main on all .test's
        $(".slayout").removeClass("main");
        $(".product").addClass("trans");
        $(".product").removeClass("main");

        //Map the active link's data-col with a dot attributes to an array
        //Join it up to make a selector
        var selector = $links.filter('.active').map(function(){
            return "."+$(this).data('col');
        }).get().join('');

        //Add the class back on to matches
        $(selector).addClass('main');

        //Finally, prevent the default action
        e.preventDefault();
    });
});
</script>

如何修改此选项，以便在未选择任何项目的情况下，将对所有项目应用新的CSS类。如果点击任何内容，则应删除此类。

Answer 1

您可以测试是否有一个或多个$(selector)：

var selector = $links.filter('.active').map(function(){
    return "."+$(this).data('col');
}).get().join('');

// remove the class added when there was no item selected
$('.allitems').removeClass('myclass');

if ($(selector).length > 0) {
    //Add the class back on to matches
    $(selector).addClass('main');
} else {
    $('.allitems').addClass('myclass');
}

Answer 2

if (selector.length == 0)
  // add class to all items

只是不要在它之前创建.join（），或者如果加入完成则为$（selector）.length。

如果没有选择，jQuery添加类

2 个答案: