【发布时间】：2017-01-28 20:21:33
【问题描述】：
我的目标：
- 有一组缩略图。
- 单击缩略图来切换类 hiddenElement 并显示一个大 隐藏的 div 中的图像。
- 单击 DOM 中的任意位置，它将隐藏或允许用户 切换到下一个 div（如果单击了该 div 的缩略图 #2）。
我的问题： 单击或 DOM 时图像切换得很好，除了当我单击第二个或第三个缩略图等时。它只是保持原始图像向上并在第一个图像下加载下一个单击的图像。
因此，当单击第一个缩略图时，它会加载图像，但是当单击第二个缩略图时，第一个图像无法消失并在其下方加载第二个图像。它应该切换我的 CSS 类 hiddenElement。
我的 jQuery：
$("#port1_thumb, #port1_large").on("click", function() {
$("#port1_thumb, #port1_large").toggleClass("hiddenElement");
});
$('document').click(function() {
$('#port1_large').removeClass('hiddenElement');
});
$("#port2_thumb, #port2_large").on("click", function() {
$("#port2_thumb, #port2_large").toggleClass("hiddenElement");
});
$('document').click(function() {
$('#port2_large').removeClass('hiddenElement');
});
我的 DOM：
<div class="wrap">
<!-- Hidden elements -->
<div id="port1_large" class="hiddenElement">
<img src="assets/portfolio-images/portfolio_content/project1.jpg">
</div>
<div id="port2_large" class="hiddenElement">
<img src="assets/portfolio-images/portfolio_content/project2.jpg">
</div>
<!-- /Hidden elements -->
<!-- Thumbnails -->
<div id="portfolio">
<ul class="portfolio-grid">
<li>
<a id="port1_thumb" target="portfolio">
<img src="assets/portfolio-images/portfolio_thumbnails/thumbnail_1.png" alt="img01"/>
<h3>Project 1</h3>
</a>
</li>
<li>
<a id="port2_thumb"
target="portfolio">
<img src="assets/portfolio-images/portfolio_thumbnails/thumbnail_2.png" alt="img01"/>
<h3>Project 2</h3>
</a>
</li>
</ul>
</div>
</div>
CSS 类：
.hiddenElement {
display: none;
}
注意事项：
我有很多 DRY 正在进行，我如何打赌简化我的代码以防止发生此 toggleClass 问题？
我认为这是由于我在我的 jQuery 中一遍又一遍地对同一个类重复操作，但我不知道如何重构它。
我确实找到了JSFiddle 正在发生的事情，但这正是我遇到的问题。无法在缩略图之间切换，尤其是在缩略图之间切换。
如果有关于 toggleClass 这个确切主题的教程或问题发布了多个元素不起作用，请链接它。
感谢您的宝贵时间。
【问题讨论】：
-
我认为这是因为当您点击#port2_thumb 或#port2_large 时，#port1_thumb 和#port1_large 不知道它。尝试这样的事情：
$("#port2_thumb, #port2_large").on("click", function() { $("#port2_thumb, #port2_large").toggleClass("hiddenElement"); $("#port1_thumb, #port1_large").toggleClass("hiddenElement"); }); -
我确实尝试过类似的方法，不幸的是它仍然会同时加载两个图像。
-
你也可以尝试用这样的方式来简化你的代码：
$( "div[id^='port']" ).on("click", function() { $(this).toggleClass("hiddenElement");}) -
是的，我昨晚也尝试过，而是从 DOM 中删除了缩略图。我想知道是否应该使用
data-target，因为我使用缩略图来触发 DOM 中的 div 来显示。 -
也许最好使用 addClass 和 removeClass 直到你得到你想要的结果。之后，您使用 toggle() 进行简化。类似：
$("#port1_thumb").on("click", function() { $(this).removeClass("hiddenElement"); $('#port2_large').addClass("hiddenElement"); });。进行一些测试，看看它是否是您期望的行为。之后，您可以使用 toggle() 来简化代码。
标签： javascript jquery html css