Question

我的目标：

有一组缩略图。
点击缩略图toggleClass hiddenElement并在隐藏的div中显示一个大图片。
点击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

您可以尝试使用合并document点击代码

以下也不正确

$('document')

应该像吼一样

$(document)

更正jQuery代码：

$(document).click(function() {
    $('#port1_large').removeClass('hiddenElement');
    $('#port2_large').removeClass('hiddenElement');
});

$("#port1_thumb, #port1_large").on("click", function() {
   $("#port1_thumb, #port1_large").toggleClass("hiddenElement"); 
});

$("#port2_thumb, #port2_large").on("click", function() {
   $("#port2_thumb, #port2_large").toggleClass("hiddenElement"); 
});

Answer 2

它适用于我

$("#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>

toggleClass显示/隐藏不使用第二个元素的div

2 个答案: