优化jquery addclass / removeclass

Question

所以基本上我用大量的代码困在这里，因为我不知道如何以优化的方式编写它。

很多时候，我想要一个元素(A)是可点击的，通过这样做，它添加了各种类。然后，当我单击另一个元素(B)时，它会从单击A中取消所有以前的类。

我想当你看到我写的那些烂摊子时，你对我的问题有了更好的了解。它工作得很完美，但我完全意识到这是次优的：

我做错了什么？我怎样才能更好地写出这些东西呢？

 $(".home").click(function () {
        $(this).toggleClass("item-active");
        $(".block-1").toggleClass("blocks");
        $(".b1").toggleClass("blockss");


        $(".block-2").removeClass("blocks");
        $(".b2").removeClass("blockss");
        $(".products").removeClass("item-active");
        $(".block-3").removeClass("blocks");
        $(".b3").removeClass("blockss");
        $(".hair-expert").removeClass("item-active");
        $(".block-4").removeClass("blocks");
        $(".b4").removeClass("blockss");
        $(".for-professionals").removeClass("item-active");
        $(".an1").removeClass("an1-default");

    });
    $(".products").click(function () {
        $(this).toggleClass("item-active");
        $(".block-2").toggleClass("blocks");
        $(".b2").toggleClass("blockss");
        $(".an1").addClass("an1-default");

        $(".block-1").removeClass("blocks");
        $(".b1").removeClass("blockss");
        $(".home").removeClass("item-active");
        $(".block-3").removeClass("blocks");
        $(".b3").removeClass("blockss");
        $(".hair-expert").removeClass("item-active");
        $(".block-4").removeClass("blocks");
        $(".b4").removeClass("blockss");
        $(".for-professionals").removeClass("item-active");

    });
    $(".hair-expert").click(function () {
        $(this).toggleClass("item-active");
        $(".block-3").toggleClass("blocks");
        $(".b3").toggleClass("blockss");

        $(".block-1").removeClass("blocks");
        $(".b1").removeClass("blockss");
        $(".home").removeClass("item-active");
        $(".block-2").removeClass("blocks");
        $(".b2").removeClass("blockss");
        $(".products").removeClass("item-active");
        $(".block-4").removeClass("blocks");
        $(".b4").removeClass("blockss");
        $(".for-professionals").removeClass("item-active");
        $(".an1").removeClass("an1-default");


    });
    $(".for-professionals").click(function () {
        $(this).toggleClass("item-active");
        $(".block-4").toggleClass("blocks");
        $(".b4").toggleClass("blockss");

        $(".block-1").removeClass("blocks");
        $(".b1").removeClass("blockss");
        $(".home").removeClass("item-active");
        $(".block-2").removeClass("blocks");
        $(".b2").removeClass("blockss");
        $(".products").removeClass("item-active");
        $(".block-3").removeClass("blocks");
        $(".b3").removeClass("blockss");
        $(".hair-expert").removeClass("item-active");
        $(".an1").removeClass("an1-default");

    });

添加了JSFiddle http://jsfiddle.net/wt6mkkng/8/

Answer 1

尝试此代码(演示)；它假定li的顺序与block-1、block-2等相同：

$('nav li').on('click', function () {
    var $active = $(this),
        // the .index() function returns a zero-based index of the li count
        // (if you click on the second li, the index will return as 1; so it goes 0.. 1.. 2.., etc)
        activeIndex = $active.index();
    // make the clicked LI active
    $active.addClass('item-active')
        // find the adjacent LI's and remove the active class
        .siblings()
        .removeClass('item-active');

    // cycle through each div block; this is using the attribute selector since
    // the divs only have "block-1", "block-2" as filenames. This might be easier to
    // read and understand if every block-# div also had a similar class name like "main-block"
    // then you could just use $('.main-block').each....
    $('div[class*="block-"]').each(function (i) {
        // make sure to include the "i" parameter in the function above; it
        // contains the current zero-based index of the element

        var $block = $(this)
            // add the "blocks" class if the block div index matches the active LI index
            // otherwise remove the "blocks" class. That's why toggleClass works nicely here
            .toggleClass('blocks', i === activeIndex)
            // find the "b1", "b2" divs inside the block; children() finds all immediate
            // children, so it could also return a <span> or <a> if it was there
            .children()
            // add "blockss" class if the block div index matches the active LI index
            // same as above
            .toggleClass('blockss', i === activeIndex);

        // Add animation class to the div
        // this one is a bit more tricky since the "an1-default" class is only added
        // when the block is active; it might be better to move this outside
        // of this loop and just look for $('.an1.blockss') to add/remove the animation class
        if (activeIndex === 1) {
            $('.an1').addClass('an1-default');
        } else {
            $('.an1').removeClass('an1-default');
        }

    });

    // add/remove classes on the links inside the clicked menu item
    $active.find('a').addClass('unfocus-list');
    $active.siblings().find('a').removeClass('unfocus-list');

    // I'm not sure what to do with this...
    // the content is visible on page load
    // but clicking on ANY link will remove it, and it won't
    // ever come back unless you reload the page - yuck
    $(".content").addClass("content-removed");

});

Answer 2

您可以将事情缩短一点，然后再看看您还可以在减少代码方面提供什么。removeClass接受要删除的类名以空格分隔的列表。

$(“.块-2.块-3.块-4”).removeClass(“块”)；

Answer 3

$('nav ul li').click(function () {
    $(this).toggleClass('item-active'); //needed for content removal (your code at the //bottom)
     $(this).siblings().removeClass('item-active');
    id=$(this).attr('class'); // get class 
 id = id.split(" "); //since we add class, split it and get first part
if( id[0]== "products") {
   $(".an1").addClass("an1-default");
} else {
                 $(".an1").removeClass("an1-default");
            }    


   $( "div" ).each(function() {  //loop thourough divs
        if($(this).data('id')==id[0]) { //if div is related to nav link, via data //attribute, do what should be done
           // console.log($(this).html());
            $(this).toggleClass("blocks");
        $(this).children().toggleClass("blockss");
             $(this).siblings().removeClass("blocks");
        $(this).siblings().children().removeClass("blockss");
        }

}); 

});

假设您可以更改html，将html5属性数据添加到div中，如下所示：

 <div class="block-1" data-id="home">
  <div class="b1 "><a href="#">XX</a></div>
   <div class="b1"><a href="#">XX</a></div>
    <div class="b1"><a href="#">XX</a></div>
    <div class="b1"><a href="#">XX</a></div>
  </div>

小提琴：http://jsfiddle.net/wt6mkkng/19/