Question

我有一个通过db的结果加载的页面。我使用db中的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的某些部分工作了，但它变得越来越冗长，这通常意味着我做了一些不正确的事情，而且我的工作方式不正常＃＆＃ 39; d喜欢。

我们的想法是，当页面加载时，所有<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();
        });
    });
});

jQuery切换和每个循环困境

1 个答案: