Question

我的投资组合网站有一点JS / Jquery问题，我仍然认为自己是一个平庸的程序员。

我的投资组合网站上有五个按钮，每个按钮代表我的一个项目。我还有一个包含五个匹配文本内容的div（作为每个项目的描述）和一个图像/链接作为项目的可视描述，在图像上有链接，因此用户可以转到项目URL。

<div class="work-content">
    <h2 class="con-active" id="contentOne">Content One</h2>
    <h2 class="con-hidden" id="contentTwo">Content Two</h2>
    <h2 class="con-hidden" id="contentThree">Content Three</h2>
    <h2 class="con-hidden" id="contentFour">Content Four</h2>
    <h2 class="con-hidden" id="contentFive">Content Five</h2>
</div>
<div class="moving-zone" style="z-index: 0;">
    <a href="about.html" class="popup" id="popupOne">
        <div class="popup-content">Background One</div>
    </a>
    <a href="about.html" class="popup is-hidden" id="popupTwo">
        <div class="popup-content">Background Two</div>
    </a>
    <a href="about.html" class="popup is-hidden" id="popupThree">
        <div class="popup-content">Background Three</div>
    </a>
    <a href="about.html" class="popup is-hidden" id="popupFour">
        <div class="popup-content">Background Four</div>
    </a>
    <a href="about.html" class="popup is-hidden" id="popupFive">
        <div class="popup-content">Background Five</div>
    </a>
</div>
<ul class="work-ul">
    <li class="work-link"><button class="button" id="workOne">WORK</button></li>
    <li class="work-link"><button class="button" id="workTwo">WORK</button></li>
    <li class="work-link"><button class="button" id="workThree">WORK</button></li>
    <li class="work-link"><button class="button" id="workFour">WORK</button></li>
    <li class="work-link"><button class="button" id="workFive">WORK</button></li>
</ul>

这个想法是：当用户进入页面时，它将显示第一个项目（意味着第一个描述和带链接的第一个图像将处于活动状态并显示 - 可能具有“is-active”类）。当用户单击任何按钮时，它将隐藏已经显示的描述和图像，并显示与项目按钮匹配的那个（因此，如果我单击第三个按钮，它将隐藏第一个描述和第一个图像并显示第三个描述和第三张图片）

我对数组和每个函数都不是很好，加上我对如何从所有非所需元素中删除“is-active”类，然后将该类添加到我想要显示的元素感到困惑。

注意：如果您使用不同的HTML标记，则非常欢迎。这只是第一次迭代，过去一天我一直坚持这一点。

Answer 1

使用您当前的设置，您可以尝试这样的事情：

$(document).ready(function() {
    $('.work-ul button').each(function(i) {
        $(this).click(function(o) {
            $('.work-content h2, div.moving-zone a').hide();
            $('.work-content h2:eq('+i+'), div.moving-zone a:eq('+i+')').show();
        });
    });
});

您需要一些初始样式/类来隐藏所有可能是您的第一个项目组合项目。

Answer 2

我喜欢在这种情况下使用data-*属性。

为按钮添加data-id属性为相应的元素（标题和锚点）指定一个data-content属性，其值与上面相同。

然后点击该按钮，首先隐藏具有data-content属性的所有元素，然后显示data-content属性与data-id属性对应的元素。

所以可能会失去一些id属性，但你应该自己判断。

$(function() {
  $('.button').on('click', function() {
    var id = $(this).data('id');
    $('[data-content]').hide();
    $('[data-content="'+id+'"]').show();
  });
});

.con-hidden,
.is-hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="work-content">
    <h2 class="con-active" id="contentOne" data-content="1">Content One</h2>
    <h2 class="con-hidden" id="contentTwo" data-content="2">Content Two</h2>
    <h2 class="con-hidden" id="contentThree" data-content="3">Content Three</h2>
    <h2 class="con-hidden" id="contentFour" data-content="4">Content Four</h2>
    <h2 class="con-hidden" id="contentFive" data-content="5">Content Five</h2>
</div>
<div class="moving-zone" style="z-index: 0;">
    <a href="about.html" class="popup" id="popupOne" data-content="1">
        <div class="popup-content">Background One</div>
    </a>
    <a href="about.html" class="popup is-hidden" id="popupTwo" data-content="2">
        <div class="popup-content">Background Two</div>
    </a>
    <a href="about.html" class="popup is-hidden" id="popupThree" data-content="3">
        <div class="popup-content">Background Three</div>
    </a>
    <a href="about.html" class="popup is-hidden" id="popupFour" data-content="4">
        <div class="popup-content">Background Four</div>
    </a>
    <a href="about.html" class="popup is-hidden" id="popupFive" data-content="5">
        <div class="popup-content">Background Five</div>
    </a>
</div>
<ul class="work-ul">
    <li class="work-link"><button class="button" id="workOne" data-id="1">WORK</button></li>
    <li class="work-link"><button class="button" id="workTwo" data-id="2">WORK</button></li>
    <li class="work-link"><button class="button" id="workThree" data-id="3">WORK</button></li>
    <li class="work-link"><button class="button" id="workFour" data-id="4">WORK</button></li>
    <li class="work-link"><button class="button" id="workFive" data-id="5">WORK</button></li>
</ul>

根据点击的按钮

2 个答案: