简体   繁体   English

jQuery toggleClass不会在单独的缩略图单击操作上进行切换

[英]jQuery toggleClass won't toggle on a separate thumbnail click action

My goal : 我的目标

  1. Have a set of thumbnails. 有一套缩略图。
  2. Click a thumbnail to toggleClass hiddenElement and show a large image inside a div that hidden. 单击缩略图以切换Class hiddenElement并在隐藏的div中显示一个大图像。
  3. Click anywhere in the DOM and it will hide or allow the user to switch to the next div (if that div's thumbnail #2 is clicked). 单击DOM中的任意位置,它将隐藏或允许用户切换到下一个div(如果单击了该div的缩略图#2)。

My Problem : The image toggles just fine when clicked on or the DOM, except for when I click the second or third thumbnail etc. It just keeps the original image up and load the next clicked image under the first leaving both images up. 我的问题 :单击或DOM时,图像切换得很好,但当我单击第二个或第三个缩略图时除外。它只是保持原始图像,并在第一个图像下方加载下一个单击的图像,而这两个图像都保留。

So when clicking on the first thumbnail it loads the image, but when clicking on the second thumbnail, the first image fails to disappear and loads the second image as well under it. 因此,当单击第一个缩略图时,它会加载图像,但是当单击第二个缩略图时,第一个图像将不会消失,并将第二个图像也加载到其下方。 It's supposed to toggle my CSS class hiddenElement. 应该切换我的CSS类hiddenElement。

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

My 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>

CSS class : CSS类

.hiddenElement {
    display: none;
}

Notes : 注意事项

I have a lot of DRY going on, how can I bet simplify my code to prevent this toggleClass issue from happening? 我正在进行很多DRY操作,如何押注简化代码以防止发生toggleClass问题?

I think it's due to me repeating the action on the same class in my jQuery over and over, but I don't know how to refactor that. 我认为这是由于我一遍又一遍地在jQuery中重复对同一类的操作,但是我不知道如何重构它。

I did find a JSFiddle of what's going on, however it's the exact problem I'm encountering. 我确实找到了正在发生的事情的JSFiddle ,但这是我所遇到的确切问题。 Not being able to switch between thumbnails instead of one in particular. 无法在缩略图之间切换,尤其是无法切换。

If there is a tutorial or question posted about this exact topic of toggleClass for multiple elements not working please link it. 如果发布了关于toggleClass的确切主题的教程或问题,而多个元素不起作用,请链接它。

Thanks for your time. 谢谢你的时间。

If i truly understand what you mean you need some thing like this: 如果我真正了解您的意思,则需要这样的事情:

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM