使用jQuery为foreach中的每个元素调用函数答案

【问题标题】：call function for each element in a foreach using jQuery使用jQuery为foreach中的每个元素调用函数
【发布时间】：2018-12-05 11:00:01
【问题描述】：

我有一个视图模型，它有一个如下所示的数据网格

<table>
@foreach (var item in Model)
                        //for(int i=0;i<Model.Count();i++)
                        {
                            using (Html.BeginForm("Edit", "Views", FormMethod.Post))
                            {
                                <tr>
                                    <td>
                                        @Html.TextBoxFor(modelItem => item.Description, new { id = "description" })

                                    </td>
                                    <td>
                                        @Html.DisplayFor(modelItem => item.DisplayAt, new { id = "displayat" })
                                    </td>
                                    <td>
                                        @Html.DropDownListFor(m => item.selectedRegion, item.RegionsList, item.Region, new { id = "ddlregion" })
                                    </td>
                                    <td>
                                        @Html.DropDownListFor(modelItem => item.Products, item.ProductsList, item.Products, new { id = "ddlproduct" })
                                    </td>
                                    <td>

                                        @Html.DropDownListFor(modelItem => item.Companies, item.CompaniesList, item.Companies, new { id = "ddlcompany" })
                                    </td>
                                    <td>

                                        @Html.DropDownListFor(modelItem => item.UserName, item.UserNamesList, item.UserName, new { id = "ddlusers" })
                                    </td>
                                    <td>

                                        @Html.CheckBoxFor(modelItem => item.Visible, new { id = "chkVisible" })
                                    </td>
                                    <td>                                            
                                        <input type="submit" value="Edit" id="button" />
                                    </td>

                                </tr>

                            }
                        }
</table>

我编写了一个 jquery 函数来处理带有 id=button 的按钮的点击

但是，它仅适用于第一行。当我单击第二行中的按钮时，没有调用该函数。如何编写一个在单击任何按钮时将调用的 jquery。

我的 jQuery 代码：

    $('#button').click(function () {
                    var product = $("#ddlproduct").find("option:selected").text();
                    var user = $("#ddlusers").find("option:selected").text();
                        *does something*
                        });

仅在第一行调用。我假设有一个类似 foreach 按钮的 id 被点击。

【问题讨论】：

按照网络标准，每个页面的 ID 应该是唯一的。改用一个类。
Does ID have to be unique in the whole page?的可能重复
为什么不用class 而不是id？
类将如何获取下拉列表的值？
类只是识别元素的另一种方式。元素可以有id="something" 和class="something"，两者都可以用javascript 选择器查找。唯一的区别是 id 应该是唯一的，而类不是。

标签： javascript jquery for-loop foreach viewmodel

【解决方案1】：

将 id 更改为类后，它们不会被限制为唯一，您可以根据上下文查找相关元素。

$('.button').click(function () {
    //get a reference to the row that contains the button that was clicked
    var $contextualRow = $(this).closest('tr');
    var product = $contextualRow.find(".ddlproduct").find("option:selected").text();
    var user = $contextualRow.find(".ddlusers").find("option:selected").text();

    *does something*
});

【讨论】：

像魅力一样工作！

【解决方案2】：

给按钮一个类而不是 ID。 <button class="button">Submit</button>

这将在每次单击带有类按钮的按钮时触发事件。

$('.button').click(function () {
                *does something*
                });

要获取您选择的值，您可以像 Taplar 所写的那样根据上下文进行操作，或者您可以选择按钮的父级并了解其子级：

var parent = $(this).parent().parent();
var product = $(".ddlproduct", parent).val();
var user = $(".ddlusers",  parent).val();

不要忘记将这些 ID 更改为类。

【讨论】：

当然，我在想什么。感谢您指出这一点。
是的，刚刚看到了。