jQuery toggleClass不會在單獨的縮略圖單擊操作上進行切換

Question

我的目標 ：

有一套縮略圖。
單擊縮略圖以切換Class 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的確切主題的教程或問題，而多個元素不起作用，請鏈接它。

謝謝你的時間。

Answer 1

如果我真正了解您的意思，則需要這樣的事情：

 <head> <title></title> <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script> <style> .hiddenElement { display: none; } </style> </head> <body> <div class="wrap"> <div id="port1_large" class="hiddenElement large"> <img src="assets/portfolio-images/portfolio_content/project1.jpg"> </div> <div id="port2_large" class="hiddenElement large"> <img src="assets/portfolio-images/portfolio_content/project2.jpg"> </div> <div id="portfolio"> <ul class="portfolio-grid"> <li> <a id="port1_thumb" class="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" class="thumb" target="portfolio"> <img src="assets/portfolio-images/portfolio_thumbnails/thumbnail_2.png" alt="img01" /> <h3>Project 2</h3> </a> </li> </ul> </div> </div> <script> $("#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"); }); $("#port1_thumb").click(function () { if (!$('#port2_large').hasClass("hiddenElement")) $('#port2_large').addClass("hiddenElement"); $("#port2_thumb").removeClass("hiddenElement"); }); $("#port2_thumb").click(function () { if (!$('#port1_large').hasClass("hiddenElement")) $('#port1_large').addClass("hiddenElement"); $("#port1_thumb").removeClass("hiddenElement"); }); $('document').click(function () { $('#port2_large').removeClass('hiddenElement'); }); </script> </body>

jQuery toggleClass不會在單獨的縮略圖單擊操作上進行切換

問題描述

1 個解決方案

解決方案1
1 2017-01-28 21:49:23

jQuery toggleClass不會在單獨的縮略圖單擊操作上進行切換

問題描述

1 個解決方案

解決方案1 1 2017-01-28 21:49:23

解決方案1
1 2017-01-28 21:49:23