Javascript 在JQuery中显示/隐藏ForLoop中项目的div

我正在尝试将我的DisplayFor更改为Editor for，当单击复选框时，我不确定是否有更好的方法进行此更改，但如果您有任何建议，我愿意接受。但无论如何，按照我的方式，它只对我的ForLoop中的第一部分执行JQuery，我不知道如何使它应用于列表中的所有部分。与现在一样，它同时显示displayFor和editorFor

我有这样生成的行

   @for (int i = 0; i < item.IHP.Count; i++)
   {
        Part part = db.Parts.Find(Model.Parts[i].ID);
        @Html.HiddenFor(x => x.Parts[i].ID)
   
        <tr class="tr_clone">

        <td>
            @part.PartIDLink
        </td>
                               
        <td>
            @Html.DisplayFor(x => x.Parts[i].PartName)
            @Html.HiddenFor(x => x.Parts[i].PartName)
        </td>
        <td style="font-weight:bold">
            @Html.DisplayFor(x => x.Parts[i].QtyInItem)
            @Html.HiddenFor(x => x.Parts[i].QtyInItem)
        </td>
        <td>
            <input type="checkbox" id="all@(part.ID)" class="part-class" data-partId="@(part.ID)" checked>
        </td>
        <td>
            <div class="AllTxt">
                    @Html.DisplayFor(x => x.Parts[i].QtyInItem)
            </div>
            <div class="editQty">
                     @Html.EditorFor(x => x.Parts[i].Qty)
            </div>
        </td>
        @foreach (var actionType in partActionTypes)
        {
            <td>
                @Html.RadioButtonFor(x => x.Parts[i].SelectedActionType, actionType, new { name = "partRadio" })
            </td>
        }

        </tr>

<script>
        $(document).ready(function () {
            //iterate through checkboxs
            $(" input[type='checkbox']").each(function () {
                //if checkbox is checked
                if ($(this).is(':checked')) {
                    //show alltext div
                    $(this).closest('.tr_clone').find(".AllTxt").show();
                    //hide other div
                    $(this).closest('.tr_clone').find(".editQty").hide();
                } else {
                    $(this).closest('.tr_clone').find(".editQty").show();
                    $(this).closest('.tr_clone').find(".AllTxt").hide();
                }
            });
        });

        $(document).ready(function () {
            $('.tr_clone input.part-class').change(function () {

                let Id = $(this).attr('id');
                let partId = $(this).attr('data-partId');
                //getting closest tr
                var selector = $(this).closest('.tr_clone');
                if ($(this).prop("checked") == true){
                    // remove cloned row
                    $('#' + Id + 'clone').remove();

                    selector.find(".AllTxt").show();
                    selector.find(".editQty").hide();
                }
                else {
                    var $tr = $(this).closest('.tr_clone');
                    var $clone = $tr.clone();
                    $clone.find('td');
                    $tr.after($clone);
                    $($clone).find(".part-class").hide();
                    $clone.find('input[type="radio"]').attr("name", (i, n) => n + 'clone');
                    $clone.attr('id', (Id) + "clone");
                    selector.find(".AllTxt").hide();
                    selector.find(".editQty").show();
                }

            });
        });

    </script>

@for（int i=0；ix.Parts[i].ID）
@part.PartIDLink
@DisplayFor（x=>x.Parts[i].PartName）
@Html.HiddenFor（x=>x.Parts[i].PartName）
@DisplayFor（x=>x.Parts[i].QtyInItem）
@Html.HiddenFor（x=>x.Parts[i].QtyInItem）
@DisplayFor（x=>x.Parts[i].QtyInItem）
@Html.EditorFor（x=>x.Parts[i].Qty）
@foreach（PartActionType中的var actionType）
{
@Html.radioButton（x=>x.Parts[i]。SelectedActionType，actionType，new{name=“partRadio”}）
}

我的Jquery代码如下所示

   @for (int i = 0; i < item.IHP.Count; i++)
   {
        Part part = db.Parts.Find(Model.Parts[i].ID);
        @Html.HiddenFor(x => x.Parts[i].ID)
   
        <tr class="tr_clone">

        <td>
            @part.PartIDLink
        </td>
                               
        <td>
            @Html.DisplayFor(x => x.Parts[i].PartName)
            @Html.HiddenFor(x => x.Parts[i].PartName)
        </td>
        <td style="font-weight:bold">
            @Html.DisplayFor(x => x.Parts[i].QtyInItem)
            @Html.HiddenFor(x => x.Parts[i].QtyInItem)
        </td>
        <td>
            <input type="checkbox" id="all@(part.ID)" class="part-class" data-partId="@(part.ID)" checked>
        </td>
        <td>
            <div class="AllTxt">
                    @Html.DisplayFor(x => x.Parts[i].QtyInItem)
            </div>
            <div class="editQty">
                     @Html.EditorFor(x => x.Parts[i].Qty)
            </div>
        </td>
        @foreach (var actionType in partActionTypes)
        {
            <td>
                @Html.RadioButtonFor(x => x.Parts[i].SelectedActionType, actionType, new { name = "partRadio" })
            </td>
        }

        </tr>

<script>
        $(document).ready(function () {
            //iterate through checkboxs
            $(" input[type='checkbox']").each(function () {
                //if checkbox is checked
                if ($(this).is(':checked')) {
                    //show alltext div
                    $(this).closest('.tr_clone').find(".AllTxt").show();
                    //hide other div
                    $(this).closest('.tr_clone').find(".editQty").hide();
                } else {
                    $(this).closest('.tr_clone').find(".editQty").show();
                    $(this).closest('.tr_clone').find(".AllTxt").hide();
                }
            });
        });

        $(document).ready(function () {
            $('.tr_clone input.part-class').change(function () {

                let Id = $(this).attr('id');
                let partId = $(this).attr('data-partId');
                //getting closest tr
                var selector = $(this).closest('.tr_clone');
                if ($(this).prop("checked") == true){
                    // remove cloned row
                    $('#' + Id + 'clone').remove();

                    selector.find(".AllTxt").show();
                    selector.find(".editQty").hide();
                }
                else {
                    var $tr = $(this).closest('.tr_clone');
                    var $clone = $tr.clone();
                    $clone.find('td');
                    $tr.after($clone);
                    $($clone).find(".part-class").hide();
                    $clone.find('input[type="radio"]').attr("name", (i, n) => n + 'clone');
                    $clone.attr('id', (Id) + "clone");
                    selector.find(".AllTxt").hide();
                    selector.find(".editQty").show();
                }

            });
        });

    </script>

$（文档）.ready（函数（）{
//遍历复选框
$（“输入[type='checkbox']”）。每个（函数（）{
//如果选中复选框
如果（$（this）.is（':checked'））{
//显示所有文本div
$（this）.clone（'.tr_clone'）.find（“.AllTxt”）.show（）；
//隐藏其他分区
$（this）.clone（'.tr_clone'）.find（“.editQty”）.hide（）；
}否则{
$（this）.clone（'.tr_clone'）.find（“.editQty”）.show（）；
$（this）.clone（'.tr_clone'）.find（“.AllTxt”）.hide（）；
}
});
});
$（文档）.ready（函数（）{
$（'.tr_clone input.part class'）.change（函数（）{
设Id=$（this.attr（'Id'）；
设partId=$（this.attr（'data-partId'）；
//接近tr
变量选择器=$（this）.close（'.tr_clone'）；
if（$（this）.prop（“选中”）==true）{
//删除克隆行
$（“#”+Id+“克隆”）.remove（）；
selector.find（“.AllTxt”）.show（）；
selector.find（“.editQty”）.hide（）；
}
否则{
var$tr=$（this）.clone（'.tr_clone'）；
var$clone=$tr.clone（）；
$clone.find（'td'）；
$tr.after（$clone）；
$（$clone.find（“.part class”）.hide（）；
$clone.find（'input[type=“radio”]'）.attr（“name”，（i，n）=>n+'clone'）；
$clone.attr（'id'，（id）+“clone”）；
selector.find（“.AllTxt”）.hide（）；
selector.find（“.editQty”）.show（）；
}
});
});

---

但是它只对ForLoop中的第一个部分执行此操作。如何使其应用于ForLoop中的每个部分？

您已将

id

指定给您的div，而不是在此处使用

class

，并且无论何时选中任何复选框，都使用

$（this）.clone（“.tru克隆”）

使用它，我们只能隐藏或显示所需的

tr

的div

演示代码（我删除了一些代码并添加了虚拟数据）：

$（文档）.ready（函数（）{
//遍历复选框
$（“输入[type='checkbox']”）。每个（函数（）{
//如果选中checkox
如果（$（this）.is（':checked'））{
//显示所有文本div
$（this）.clone（'.tr_clone'）.find（“.AllTxt”）.hide（）；
//隐藏其他分区
$（this）.clone（'.tr_clone'）.find（“.editQty”）.show（）；
}否则{
$（this）.clone（'.tr_clone'）.find（“.editQty”）.hide（）；
$（this）.clone（'.tr_clone'）.find（“.AllTxt”）.show（）；
}
});
$（'.tr_clone input.part class'）.change（function（）{
设Id=$（this.attr（'Id'）；
设partId=$（this.attr（'data-partId'）；
//接近tr
变量选择器=$（this）.close（'.tr_clone'）；
//如果选中复选框
if（$（this）.prop（“选中”）==true）{
///找到并显示或隐藏
selector.find（“.AllTxt”）.show（）；
selector.find（“.editQty”）.hide（）；
}否则{
selector.find（“.AllTxt”）.hide（）；
selector.find（“.editQty”）.show（）；
}
});
})；

@part.PartIDLink
零件号
QtyInItem
什么事
某物数量
@part.PartIDLink
零件号
QtyInItem
什么事
某物数量

您已将

id

指定给您的div，而不是在此处使用

class

，并且无论何时选中任何复选框，都使用

$（this）

演示代码（我删除了一些代码并添加了虚拟数据）：


$（文档）.ready（函数（）{
//遍历复选框
$（“输入[type='checkbox']”）。每个（函数（）{
//如果选中checkox
如果（$（this）.is（':checked'））{
//显示所有文本div
$（this）.clone（'.tr_clone'）.find（“.AllTxt”）.hide（）；
//隐藏其他分区
$（this）.clone（'.tr_clone'）.find（“.editQty”）.show（）；
}否则{
$（this）.clone（'.tr_clone'）.find（“.editQty”）.hide（）；