Question

我对使用foreach的jQuery onClick函数有一个问题。（我是jQuery的新手。）

<table>
  <th>CityName</th>
  <th>CityId</th>
  @foreach (var item in Model.Adress)
  {   
    <tr>
      <td>
        <div onClick(cityDetail(@item.CityId, @item.cityName))>@CityId</div>
      </td>
      <td>
        <div>@CityName</div>
      </td>
    </tr>
  }
</table>

<script> 
  function cityDetail(cityId, cityName) {
    //do something
  }
</script>

我的问题是，我怎样才能用jQuery做到这一点？ onClick(cityDetail(@item.CityId,@item.cityName)。我想使用foreach并将点击的多个参数传递给jQuery。

非常感谢您的回答。

Answer 1

避免所有on*事件属性通常是一个好主意，因为它将HTML和JS代码紧密地联系在一起。相反，使用不显眼的Javascript附加事件处理程序。您可以通过循环中创建的元素的CityId属性将CityName和data值传递给事件处理程序。

另请注意，您的HTML存在一些问题，例如<tr>周围缺少th，而下方数据的列标题排列错误。

尽管如此，试试这个：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  $(function() {
    $('.city').click(function() {
      var $city = $(this);
      cityDetail($city.data('city-id'), $city.data('city-name'));
    });
  });
</script>
<table>
  <tr>
    <th>City Id</th>
    <th>City Name</th>
  </tr>
  @foreach (var item in Model.Adress) {
    <tr>
      <td>
        <div class="city" data-city-id="@item.CityId" data-city-name="@item.cityName">@item.CityId</div>
      </td>
      <td>
        <div>@item.cityName</div>
      </td>
    </tr>
  }
</table>

如何在MVC View Foreach的jQuery中使用OnClick函数

1 个答案: