Question

我有一系列删除图标显示：

echo '<img id="'.$items['id'].'" src="images/delete.png" />';

$items['id']是对DB项目ID的引用，我想要删除该图标。

单击该项目时，如何在jquery中访问此id，以便我可以调用：

$.get('ajax/delete.php', { id: $('#id').val() },      
function(data) {}

或类似的东西。

Answer 1

以下代码可以帮助您解决问题。将“delete”类添加到每个img。

$('.delete').onclick(function() {
    var id = $(this).attr('id');
    $.post('ajax/delete.php', { id: id } function(data) {

     ...
    });
});

Answer 2

$("#imageID").click ( function () {
    alert ( $(this).attr ( "id" ) );
});

如果您有班级名称

$(".yourclassname").click ( function () {
    alert ( $(this).attr ( "id" ) );
});

Answer 3

我会稍微改变一下。我会删除每个图标后跟一个隐藏的输入，其中包含与要删除的项目的ID对应的项目的值。然后我会使用jQuery来提取隐藏字段的value属性。这样，您就不必进行任何魔术字符串操作来使用数字ID。

此外，从不使用get请求进行删除。所有人必须做的就是以正确的格式键入URL，使用适当的凭据绕过您添加的任何客户端处理以验证删除。 AJAX允许您发送其他类型的请求，您应该更喜欢POST或DELETE删除请求。

echo '<img class="deleteIcon" src="images/delete.png" />';
echo '<input type="hidden" value="' + $item[id] + '" />';

$('.deleteIcon').click( function() {
     var id = $(this).next('input[type=hidden]').attr('value');
     $.ajax({
          url: 'ajax/delete.php',
          type: 'delete',
          data: { id: id },
          dataType: 'json', // get back status of request in JSON
          success: function(data) {
                if (data.status) {
                   // remove row, or whatever
                }
                else {
                   // handle deletion error
                },
          ... other parameters/callbacks ...
     });
});

Answer 4

我个人通过使用＆lt; a＆gt;包装＆lt; img＆gt;来亲自去除hijax和优雅降级。另外，您很可能不应该使用GET执行任何删除/删除操作。但是你走了;

$('img[src=images/delete.png]').click(function(e) {
  $.get('ajax/delete.php', { id: this.id }, function() {
    // complete, perhaps get rid of the <img> now?
  });

  return false;
});

使用jquery获取单击的元素id

4 个答案: