Question

我的目标：

有一组缩略图。
点击缩略图toggleClass 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 个答案: