jquery - 优化 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

试试这个代码( demo )；它假设 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");

});