Question

我有一个带有以下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是任何整数？

Answer 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!")
    }
  });
});

Answer 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!")
    }
  });
});

Answer 3

我认为问题在于编写一个处理所有div的通用事件处理程序。您无法使用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"));
// ....
});

如何在ID列表中使用jquery事件？

3 个答案: