javascript - toggleClass 显示/隐藏 div 不适用于第二个元素

Question

我的目标:

1. 有一组缩略图。
2. 单击缩略图切换类 hiddenElement 并在隐藏的 div 中显示大图像。
3. 单击 DOM 中的任意位置，它将隐藏或允许用户切换到下一个 div(如果单击该 div 的缩略图 #2)。

问题:

当我在我的 jQuery 中添加我的 removeClass 时，我的问题出现了。我认为它会干扰我的 toggleClass，但我不太确定我是否正确构建了它。因此，当用户单击大图像或 DOM 中的任何位置时，无法切换类。

我的 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>

我的 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');
});

注意事项:

我将 .hiddenElement 的 CSS 设置为“display: none”。

我注意到我在这方面也有很多 DRY，但是，这是目前我知道如何做到这一点的唯一方法。

我可以在我的 jQuery 中做得更好吗？

如果有帖子回答了这个问题，我深表歉意，请引导我到正确的帖子，我一直找不到我要找的东西。感谢您的宝贵时间。

Answer 1

它对我来说工作正常

$("#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');
});

.hiddenElement { display: none; }

<div class="wrap">

<!-- Hidden elements -->

    <div id="port1_large" class="hiddenElement">
        <img src="http://lorempixel.com/400/200/">   
    </div>

    <div id="port2_large" class="hiddenElement">
        <img src="http://lorempixel.com/400/200/">   
    </div>

<!-- /Hidden elements -->

<!-- Thumbnails -->

      <div id="portfolio">
          <ul class="portfolio-grid">
                <li>
                    <a id="port1_thumb"  target="portfolio">
                        <img src="http://lorempixel.com/32/32/" alt="img01"/>
                        <h3>Project 1</h3>
                    </a>
                </li>
                <li>
                    <a id="port2_thumb"
                       target="portfolio">
                        <img src="http://lorempixel.com/32/32/" alt="img01"/>
                        <h3>Project 2</h3>
                    </a>
                </li>
            </ul>
        </div>
</div>

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>