javascript - jquery按键功能具有相同id的多个输入

Question

大家好我有一个问题这是我的 jquery 代码

<script type="text/javascript">
    $('#com').keypress(function (event) {
        var comm = $(this).val();

        var keycode = (event.keycode ? event.keycode : event.which);
        if (keycode == 13) {
            var comm = $("#com").val();
            alert(comm);
            var hidid = $("#hidid").val();
            alert(hidid);

            $.ajax({
                cache: false,
                type: "POST",
                url: "/Home/postComment",
                datatype: "json",
                data: { comment: comm, hidid: hidid },
                error: function () {
                    alert("error ");
                },
                success: function () {
                    window.location.href = "/Home/Index";
                }
            });
        }
        event.stopPropagation();
    });
</script>

我在 Controller 中这样调用它

[HttpPost]
    public JsonResult postComment(string comment,int hidid)
    {
        Repository<whichOne> _rwo = new Repository<whichOne>();
        Repository<Comment> _rc = new Repository<Comment>();

        int _userId = Convert.ToInt32(Session["_userId"]);

        Comment _comment = new Comment
        {
            userId = _userId,
            comment = comment,
            createDate = DateTime.Now,
            isValid = true,
            whichOneId = hidid,
        };

        _rc.Add(_comment);
        _rc.Save();

        return Json(new { success = true });
    }

我有来自数据库的数据，我正在尝试获取我的数据的 ID 并从输入中获取评论以发布

@foreach (var item in Model._mywhichOneHelper)
                {
          @Html.Hidden("hidid",@item.id)
          <input type="text" class="pull-left input-sm form-control" id="com" name="comments" style="border-radius: 12px;" placeholder="Your Comments...">}

但是，当我写完一些东西后按回车键时，我只能到达第一个数据。按键不适用于其他数据，我该怎么办？

正如您所见，当我编写并单击回车键进行第一次输入时，它可以工作，但是当我对其他数据尝试此操作时，没有任何反应。非常感谢。

Answer 1

这里的问题是你的 jQuery 选择器只找到第一个元素，因为它只期望一个元素有一个 id(id 应该是唯一的)。

让多个元素具有相同的 id 并不是一个好的做法 - 这是你的问题的一部分。如果您可以重新设计标记，使元素具有唯一的 id，但共享一个类(例如 class="com")，那么您可以轻松编写 jQuery 选择器来查找它们。在这种情况下，仍然有一个解决方法，您可以使用 jQuery 选择器，如下所示: [id=com] 而不是 #com ，这将找到所有匹配的元素而不是只寻找具有该唯一 ID 的一个(预期)元素。

另请注意，我必须更改您的事件处理程序，以便它不使用另一个 jQuery 选择器，而是将值 $self 传递到闭包中，以便它保存正确的唯一实例，而不是始终找到第一个。

$(function() {
  $("[id=com]").keypress(function(event) {
      var $self = $(this);
      var comm = $self.val();

      var keycode = (event.keycode ? event.keycode : event.which);
      if (keycode == 13) {
        var comm = $self.val();
        alert(comm);
        event.stopPropagation();
      }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input type="text" class="pull-left input-sm form-control" id="com" name="comments" style="border-radius: 12px;" placeholder="Your Comments...">
<br />
<input type="text" class="pull-left input-sm form-control" id="com" name="comments" style="border-radius: 12px;" placeholder="Your Comments...">
<br />
<input type="text" class="pull-left input-sm form-control" id="com" name="comments" style="border-radius: 12px;" placeholder="Your Comments...">
<br />

更好的是使用唯一的 ID，并通过类进行选择，如下所示:

$(function() {
  $(".com").keypress(function(event) {
    var $self = $(this);
    var comm = $self.val();

    var keycode = (event.keycode ? event.keycode : event.which);
    if (keycode == 13) {
      var comm = $self.val();
      alert(comm);
      event.stopPropagation();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input type="text" class="pull-left input-sm form-control com" id="com1" name="comments" style="border-radius: 12px;" placeholder="Your Comments...">
<br />
<input type="text" class="pull-left input-sm form-control com" id="com2" name="comments" style="border-radius: 12px;" placeholder="Your Comments...">
<br />
<input type="text" class="pull-left input-sm form-control com" id="com3" name="comments" style="border-radius: 12px;" placeholder="Your Comments...">
<br />