时间戳

首页 > 解决方案 > 如何在 MVC 视图的 foreach 块中使用 jQuery 操作段落标签

jquery - 如何在 MVC 视图的 foreach 块中使用 jQuery 操作段落标签

问题描述

我目前正在使用jQuery在用户选中复选框时更改段落标签的值，我面临的问题是当用户选中复选框时，只有第一条记录中的段落标签发生变化，其他人什么也不做

MVC查看代码如下：

@foreach (var item in Model)
{
<div class="tabcolumn-container" style="height: 90px; border: 1px solid grey">

    <div class="tabcolumn30 frame" style="margin-top: 0px; margin-bottom: 0px;">
        <div style="height: 35px; background-color: grey;">
            <p style="font-size: 22px; font-weight: bold">@item.group_category</p>
        </div>
        <span class="helper">

            <img src="~/images/@item.image_path" />

        </span>
    </div>
    <div class="tabcolumn50">

        <div style="height: 40px; border-bottom: 1px solid grey; border-left: 1px solid grey; border-right: 1px solid grey">
            <p>&emsp;&emsp;&emsp;100kms per day&emsp;&emsp;<input id="defaultOpen" type="checkbox" class="slectOne" data-id="R @item.standard_100 per day" />&emsp;Standard Cover&emsp;&emsp;&emsp;&emsp;&emsp;<input type="checkbox" class="slectOne" data-id="R @item.super_100 per day" />&emsp;Upgrade to Super Cover</p>
        </div>

        <div style="height: 40px; border-bottom: 1px solid grey; border-left: 1px solid grey; border-right: 1px solid grey">
            <p>&emsp;&emsp;&emsp;200kms per day&emsp;&emsp;<input type="checkbox" class="slectOne" data-id="R @item.standard_200 per day" />&emsp;Standard Cover&emsp;&emsp;&emsp;&emsp;&emsp;<input type="checkbox" class="slectOne" data-id="R @item.super_200 per day" />&emsp;Upgrade to Super Cover</p>
        </div>

        <div style="height: 40px; border-bottom: 1px solid grey; border-left: 1px solid grey; border-right: 1px solid grey">
            <p>&emsp;&emsp;&emsp;400kms per day&emsp;&emsp;<input type="checkbox" class="slectOne" data-id="R @item.standard_400 per day" />&emsp;Standard Cover&emsp;&emsp;&emsp;&emsp;&emsp;<input type="checkbox" class="slectOne" data-id="R @item.super_400 per day" />&emsp;Upgrade to Super Cover</p>
        </div>

        <div style="height: 55px; display: table; border-left: 1px solid grey; background-color: grey; width: 569px; border-right: 1px solid grey">

        </div>

    </div>

    <div class="tabcolumn20" style="height: 160px">
        <p style="font-size: 15px; text-align: center">Pick-up location: In Branch</p>
        <p style="font-size: 15px; text-align: center">Fuel Policy: Full to Full</p>
        <p style="padding-left: 50px; font-size: 23px; font-weight: bold; margin-top: 24px" id="result">R @ViewBag.stand_100 per day</p>
        <input type="button" value="Book Now!" style="height: 56px; background-color: yellow; width: 227.66px; border-style: none"/>
    </div>
</div>
<br />
}

jQuery代码如下：

<script>
    $(document).ready(function () {
        $('.slectOne').on('change', function () {
            $('.slectOne').not(this).prop('checked', false);
            $('#result').html($(this).data("id"));
            if ($(this).is(":checked"))
                $('#result').html($(this).data("id"));
            else
                $('#result').html('');
        });
    });
</script>

截图如下：

截图01

正如您从屏幕截图中看到的那样，所有复选框都组合在一起。如何创建一个新组，以便每条记录都有自己的分组并且不与其他记录共享复选框，以及如何允许这些复选框激活/操作其自己的段落标签，而不仅仅是第一个记录的段落标签？

非常感谢您的帮助

标签： jqueryhtmlasp.net-mvc

解决方案

id="result"用你的剃刀替换你foreach的class="result"jQuery并将你的jQuery更改为：

$(document).ready(function () {
    $('.slectOne').on('change', function () {
        $('.slectOne').not(this).prop('checked', false);
        let result = $('.result', $(this).closest('.tabcolumn-container'));
        result.html($(this).is(":checked") ? $(this).data("id") : '');
    });
});

在此期间，您还可以id="defaultOpen"从循环中删除（重复id的 s 在 HTML 中无效），并且您可能还想删除所有的 inlinestyle并使用类来设置元素的样式。它会让你的代码更干净，更容易维护。

参考：“对不起，我对 jQuery 很陌生”：
这与 jQuery 无关。这是普通的 HTML。在 HTML 中，重复的 id 是无效的。

idDOM中基于选择的方法

.getElementById('#someId')

只返回第一个元素id="someId"，完全忽略后续元素。
idof 元素在 DOM 中应该是唯一的，它们是选择元素的最快方式。

<div id="foo">bar...</div>
<div id="foo">...tender => Only first item with same id is targeted. </div>
<script>
   document.getElementById("foo").style.color = 'red';
</script>

当您需要使用 DOM 元素的集合时，您应该使用class专门为此目的设计的属性（使用该属性为每个元素分配样式和/或行为class）。

即使是非法的，从技术上讲，也有可能通过多个共享相同的元素id，使用querySelectorAll：

 document.querySelectorAll("#someId").forEach(el => el.style.color = 'red');

但这并没有使id在 DOM 中多次具有相同的合法性。假设上述方法有效，因此您可以以编程方式选择所有非法元素并将其更改id为唯一元素，从而使您的标记有效。

推荐阅读