当其他元素更改类时显示/隐藏元素 - jQuery答案

【问题标题】：Show/hide elements when other elements change class - jQuery当其他元素更改类时显示/隐藏元素 - jQuery
【发布时间】：2013-11-06 22:12:38
【问题描述】：

我有一个内容包装器，其中包含多个部分，每个部分都有不同的 id。可以通过菜单导航访问这些部分，该导航会触发 transform 操作，该操作使用 translate3d 在各部分之间横向移动，使用名为 active 的类strong> 以显示应显示的部分。我在内容包装器上放置了两个具有绝对位置的锚点，类似于幻灯片中的箭头，一个在左侧，一个在右侧。

这是代码的样子

    <div id="wrapper">
        <a class="left-arrow" href="#"></a>
        <a class="right-arrow" href="#"></a>

        <header>
            <nav id="main">
                <a class="active" href="#!/one">one</a>
                <a href="#!/two">two</a>
                <a href="#!/three">three</a>
                <a href="#!/four">four</a>
            </nav>
        </header>
        <div class="content_wrapper" style="display: block; transform: translate3d(0px, 0px, 0px);">
            <section id="one" class="active">content one</section>
            <section id="two">content two</section>
            <section id="three">content three</section>
            <section id="four">content four</section>
        </div>
    </div>

CSS

    .left-arrow{ background: url('../img/left-arrow.png') left top no-repeat; height: 64px; width: 16px; display: block; position: absolute; top: 180px; left: 0; z-index: 10;}
    .right-arrow{ background: url('../img/right-arrow.png') right top no-repeat; height: 64px; width: 16px; display: block; position: absolute; top: 180px; right: 0; z-index: 10;}

我的问题是，当第一部分有 active 类和 right 类时，我不知道如何隐藏 left 箭头> 箭头，当最后一部分具有类 active 时。我尝试使用 on 和 change 但显然我失败了，我是 jQuery 元素和事件操作的新手。我应该使用哪个选择器以及哪个事件？有人可以给我一些指示吗？

这里是 jQuery 部分

    (function (e) {

        var r = !1;
        e(window).on("hashchange", function (i) {
            var s = e("section#" + document.location.hash.replace("#!/", ""));
            if (!r && !s.hasClass("active")) {
                r = !0;
                e('nav#main a[href="' + document.location.hash + '"]').addClass("active").siblings().removeClass("active");
                e("section.active").animate({
                    scrollTop: 0
                }, 300);
                e("section.active").children("footer").children("div.box").hide();
                s.addClass("active").siblings().removeClass("active");
                if (Modernizr.csstransitions && Modernizr.csstransforms3d) e("div.content_wrapper").transition({
                    transform: "translate3d(-" + 1e3 * s.index() + "px, 0, 0)"
                }, {
                    duration: 800,
                    easing: "cubic-bezier(0.770, 0.000, 0.175, 1.000)"
                }, function () {
                    r = !1
                });
                else {
                    e("div.content_wrapper").animate({
                        left: "-" + 1e3 * s.index() + "px"
                    }, {
                        duration: 800,
                        queue: !0
                    });
                    r = !1
                }
            }
        });

    })

【问题讨论】：

类被javascript改变了吗？或者只是设置页面加载？如果是 javascript，请显示该代码

标签： javascript jquery

【解决方案1】：

将为所有部分添加一个类，以便您可以添加或删除，而不必关注特定的 ID 是第一个/最后一个

<section id="one" class="content active">content one</section>

function setArrowState(){
    var $content=$('.content');
    $('.left-arrow')[ $content.first().is('.active') ? 'hide' :'show' ]();
     $('.right-arrow')[ $content.last().is('.active') ? 'hide' :'show' ]();
}

$(function(){
    /* set arrows on page load*/
    setArrowState();
});

编辑：在显示的haschange代码中，在.addClass("active").siblings().removeClass("active");之后在线调用setArrowState()

【讨论】：

【解决方案2】：

你只需要一个变量知道哪个是被选中的元素，这样你就可以删除类，然后设置点击事件来添加类。

var menu1 = document.querySelector('#main1');
var menu2 = document.querySelector('#main2');
    // etc

var selected = menu1;

var activeClass = function()
    {
    $(selected).removeClass('active');

    $(this).addClass('active');

    selected = this;
    };


menu1.onclick = activeClass;
menu2.onclick = activeClass;

【讨论】：