Question

我已动态生成如下所示。我需要通过单击每行中的updateCart按钮来获取文本框的值。

 @foreach (var item in Session["Cart"] as List<AP.WebApp.Models.Cart>)
                    {
                    <tr class="eachitem">
                        <td><img src="@item.Path.Split('~')[1]" style="width:200px;height:auto" /><p>@item.Title</p></td>
                         <td>
                        @if(item.Preview == 1){

                            @Html.CheckBox("preview", new { @checked = "checked" })
                        }
                        else
                        {
                             @Html.CheckBox("preview")
                        }
                             </td>
                        <td id="qtyid">
                            <input id="qty" type="text"  value="1"/></td>
                        <td>0</td>
                        <td>
                            <input id="deleteCart" type="submit" value="Delete" data-assigned-id="@item.ID" /></td>
                        <td>
                            <input id="updateCart" type="submit" value="Update" data-assigned-id="@item.ID"  /></td>

                    </tr>
                    }

为此，我尝试了：

 $('.cartItem').on('click', '#updateCart', function (e) {
            e.preventDefault();
var val = $(this).closest('#qtyid').find('#qty').val();
});

但警报（val）结果未定义。任何想法请分享。

Answer 1

首先，为多行复制相同的ID不是有效的html标记，这会在您使用javascript时产生许多问题。

所以，解决方案是使用类名或为每个元素应用唯一的id，这是好的但不是更好。

@foreach(var item in Session["Cart"] as List < AP.WebApp.Models.Cart > ) { 
  <tr class="eachitem">
    <td> <img src = "@item.Path.Split('~')[1]"
  style="width:200px;height:auto" / > < p > @item.Title < /p></td >
    <td> 
    @if (item.Preview == 1) {

      @Html.CheckBox("preview", new {@
        checked = "checked"
      })
    } else {
      @Html.CheckBox("preview")
    } 
  </td>
  <td class="qtyid">
    <input class="qty" type="text"  value="1"/ > 
  </td>
  <td>0</td>
  <td>
    <input class="deleteCart" type="submit"  value="Delete"  data-assigned-id="@item.ID"/> 
  </td>
  <td>
    <input class="updateCart" type="submit" value="Update" data-assigned-id="@item.ID"  / > 
  </td>
  </tr>
}

现在您可以使用此脚本：

$('.cartItem').on('click', '.updateCart', function (e) {
    e.preventDefault();
    var val = $(this).closest('tr').find('.qty').val();
});

Answer 2

您应该修改dom以使用重复的类而不是重复的ID。 ids应该是

   <td id="qtyid">
       <input class="qty" type="text"  value="1"/></td>
   <td>0</td>
   <td>
       <input class="deleteCart" type="submit" value="Delete" data-assigned-id="@item.ID" />
   </td>
   <td>
       <input class="updateCart" type="submit" value="Update" data-assigned-id="@item.ID"  />
   </td>

然后使用：

 $('.cartItem').on('click', '#updateCart', function (e) {
  e.preventDefault();
  var val = $(this).closest('tr').find('.qty').val();
 });

Answer 3

@jai建议使用类

  <tr class="eachitem">
                        <td><img src="@item.Path.Split('~')[1]" style="width:200px;height:auto" /><p>@item.Title</p></td>
                         <td>
                        @if(item.Preview == 1){

                            @Html.CheckBox("preview", new { @checked = "checked" })
                        }
                        else
                        {
                             @Html.CheckBox("preview")
                        }
                             </td>
                        <td id="qtyid">
                            <input class="qty" type="text"  value="1"/></td>
                        <td>0</td>
                        <td>
                            <input class="deleteCart" type="submit" value="Delete" data-assigned-id="@item.ID" /></td>
                        <td>
                            <input class="updateCart" type="submit" value="Update" data-assigned-id="@item.ID"  /></td>

                    </tr>

JS：

$('.cartItem').on('click', '#updateCart', function (e) {
            e.preventDefault();
var val = $(this).parents('.eachitem').find('.qty').val();
});

通过单击该行中的按钮找到每行中文本框的值？

3 个答案: