Question

Razor / HTML（其中许多）：

<div class="directory-item" id="@item_id" name="@item_name" style="padding-left: @(indent_level)px;  display: @(display)">
   <i class="fa @icon_type"></i>
   @item.ItemName (id: @item_id, name: @item_name, level: @item.Level)
   <i class="fa  fa-angle-right float-right"></i>
</div>

使用Javascript：

$(".directory-item").click(function () {
    $('div[name*=' + this.id + ']').each(function () {
        if (this.attr('display') == "none") {
            this.show();
        } else {
            this.hide();
        }
    });
});

基本问题：你怎么把＆＃34;每个＆＃34;在＆＃34;点击＆＃34;事件和参考＆＃34;每个＆＃34; item（每次访问元素时）都使用＆＃34;这个＆＃34;？也许我不应该使用每个陈述而是其他东西？

Answer 1

在每个方法的回调中，你可以有2个参数，一个用于索引，第二个用于循环的当前迭代项。

$(function () {

    $(".directory-item").click(function () {

        $('div[name*=' + this.id + ']').each(function (a,b) {
            if ($(b).attr('display') == "none") {
                $(b).show();
            } else {
                $(b).hide();
            }
        });
    });
});

如果只是更新可见性，您也可以使用toggle

$('div[name*=' + this.id + ']').each(function (a,b) {
    $(b).toggle();
});

Answer 2

假设有些名称与点击的元素的id匹配的元素，您应该可以将其简化为：

$(".directory-item").click(function () {
        $('div[name*=' + this.id + ']').toggle()
});

使用toggle()会显示隐藏的元素，如果不隐藏则会隐藏它，并且不需要each，因为它会在内部遍历所有匹配的元素

Jquery每个内部的onclick事件

2 个答案: