javascript - jQuery 切换和 for every 循环问题

Question

我有一个通过数据库结果加载的页面。我使用数据库中的 id 为屏幕上的每一行提供唯一的标识符。

我的结构有一个容器，每个容器都有应该隐藏的按钮和div。

<td>
     <div class="ellipsisContainer">
         <button th:id='data-ellipsisBtn- + ${appId}' th:type="button" th:name="ellipsis" th:class="ellipsisBtn">...</button>
         <div th:id='data-ellipsisOptions- + ${appId}' class="ellipsisOptions">
             <span>I should be hidden...</span>
         </div>
     </div>

我的 jQuery 的某些部分可以正常工作，但它变得越来越冗长，这通常意味着我做了一些不正确的事情，并且它没有按照我想要的方式工作。

这个想法是所有 <div th:id='data-ellipsisOptions- + ${appId}' class="ellipsisOptions">当页面加载时，div 将被隐藏，当用户单击相关按钮时，它将切换显示/隐藏。

到目前为止我已经:

//Hide the additional features div
$(document).ready(function() {

    //iterate through all the divs - get their ids, hide them, then call the on click
    $(".ellipsisContainer").each(function() {
        $context = $(this);
        $button = $context.find(".ellipsisBtn");
        // $currentId = $button.attr('id');
        $divOptions = $context.last();

        //$($divOptions).hide();
        $($button).on('click', function(event) {
            $($divOptions).hide();
        });
    });
});

我认为循环存在问题，因为我似乎只针对页面上的最后一行。

预先感谢您的帮助

Answer 1

问题是您将变量声明为全局变量，因此在循环的每次迭代中您都在更新同一变量的值。

您可以隐藏单击按钮的同级元素

$(document).ready(function () {
    //iterate through all the divs - get their ids, hide them, then call the on click
    $(".ellipsisContainer .ellipsisBtn").click(function () {
        $(this).next().hide();

        //if you want to be more specific
        // $(this).siblings('.ellipsisOptions').hide();
    });
});

<小时/>

如果您想让代码正常工作，请将变量定义为每个回调函数的本地变量

//Hide the additional features div
$(document).ready(function () {

    //iterate through all the divs - get their ids, hide them, then call the on click
    $(".ellipsisContainer").each(function () {
        var $context = $(this);
        var $button = $context.find(".ellipsisBtn");
        //            $currentId = $button.attr('id');
        var $divOptions = $context.find('div').last();

        //$($divOptions).hide();
        $($button).on('click', function (event) {
            $($divOptions).hide();
        });
    });
});