如何在 id 列表上使用 jquery 事件？答案

【问题标题】：How can I use jquery events on a list of ids?如何在 id 列表上使用 jquery 事件？
【发布时间】：2014-06-07 15:44:15
【问题描述】：

我有一个带有 id 列表的 html，例如：

<div id="id0" value="myval0">Click me</div>
<div id="id1" value="myval1">Click me</div>
<div id="id2" value="myval2">Click me</div>
<div id="id3" value="myval3">Click me</div>

列表可以由服务器生成。我正在尝试使用 jQuery 将这种形式的东西发送到已单击 id 的服务器：

$( "#id0" ).click(function() {
  var urlstring = '/getresult';
alert($("#id0").val());
  $.ajax({
    type: "POST",
    url: urlstring,
    data: {
      draft_no: $("#id0").val(),
    },
    success: function(result){
      alert("Function returned with success!")
    }
  });
});

在这种情况下，我发送了“id0”形式的 id。但是如何将其推广到“id n”，其中 n 是任何整数？

【问题讨论】：

你试过 $("#id"+n).click(function(){ });
一个ID可以不包含一个空格，你只能有一个！
同时删除 id 和 0 之间的空格
简单的解决方案是在服务器生成类的时候添加一个类。

标签： javascript jquery ajax list

【解决方案1】：

试试这个 JQuery 选择器 E[a^=v] 它匹配所有元素 E 拥有属性 a 其值开始宽度 v

你的html：

<div id="id-1" value="my val 1">Click me</div>
<div id="id-2" value="my val 2">Click me</div>
<div id="id-3" value="my val 3">Click me</div>

你的 jQuery

$('div[id^=id]').click(function() {
  var urlstring = '/getresult';
  var val = $(this).val();
  $.ajax({
    type: "POST",
    url: urlstring,
    data: {
      draft_no: val,
    },
    success: function(result){
      alert("Function returned with success!")
    }
  });
});

【讨论】：

嗯？ “开始”，而不是“结束”。

【解决方案2】：

$( "[id^=id]" ).click(function() {
  var urlstring = '/getresult';
alert($(this).val());
  $.ajax({
    type: "POST",
    url: urlstring,
    data: {
      draft_no: $(this).val(),
    },
    success: function(result){
      alert("Function returned with success!")
    }
  });
});

【讨论】：

【解决方案3】：

我认为问题在于编写一个通用事件处理程序来处理所有divs。你不能用 ID 做到这一点。你必须给你的 div 一个特定的类 like this

<div id="id 1" value="my val 1" class="mydiv">Click me</div>
<div id="id 2" value="my val 2" class="mydiv">Click me</div>
<div id="id 3" value="my val 3" class="mydiv">Click me</div>

$(".mydiv").click(function() {
alert($(this).attr("value"));
// ....
});

或通过容器查找它们like this

<div id="mycontainer">
<div id="id 1" value="my val 1">Click me</div>
<div id="id 2" value="my val 2">Click me</div>
<div id="id 3" value="my val 3">Click me</div>
</div>

$("#mycontainer").click(function(evt) {
alert($(evt.target).attr("value"));
// ....
});

【讨论】：