Question

我有一张这样的表：

<table>
<thead>
    <tr>
        <th>Hostname</th>
        <th>Action</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>127.0.0.1</td>
        <td><a name="delete" onclick="remove_host('127.0.0.1')">Remove</a></td>
    </tr>  
    <tr>
        <td>127.0.0.2</td>
        <td><a name="delete" onclick="remove_host('127.0.0.2')">Remove</a></td>
    </tr>  
    <tr>
        <td>127.0.0.3</td>
        <td><a name="delete" onclick="remove_host('127.0.0.3')">Remove</a></td>
    </tr>
</tbody>

我要做的是，当用户点击删除时，该链接会被其中一个加载图片替换，这样用户就无法重复点击该链接。

我如何获得a元素，所以我可以使用jQuery相应地设置HTML？

在网站的其他部分，我可以将rel="host-1"（或类似的）附加到链接，因此我可以轻松引用它来更改HTML。

Answer 1

您可以使用属性选择器根据<a/>

的名称进行选择

此外，您可以使用one()，因此处理程序只会触发一次。

$("a[name='delete']").one("click", function(){
   $(this).html("Doing something...")
});

<强> Example on jsfiddle

旁注，只是替换为.html()不会删除内联js，您可以使用.replaceWith()完全删除<a/>

$("a[name='delete']").one("click", function() {
    $(this).replaceWith($("<img/>").attr({src: "http://placekitten.com/g/50/50"}))
});

<强> Example on jsfiddle

Answer 2

$('a[name="delete"]').click(function() {

});

修改

不要使用内联JS。写下面的内容要清晰得多。

$('a[name="delete"]').click(function() {
    var thehost = $(this).parent().prev().html();
    remove_host(thehost);
});

Answer 3

您可以在调用remove_host时传递this，如下所示：

remove_host('127.0.0.1', this);

这将为您提供对DOM元素的引用，您可以将其包装在jQuery中。

Answer 4

我不确定您是否能够更改标记，但这是一个选项。

<tr>
  <td>120.0.0.2</td>
  <td><a name="delete" data-ip="120.0.0.2">Remove</a></td>
</tr>

$("a[name=delete]").one("click", function(e) {
  e.preventDefault();
  $("<span>Loading</span>").insertBefore(this);
  var ip = $(this).hide().data("ip");
  remove_host(ip);
});

Answer 5

如果使用jQuery ......

<script type=text/javascript>
$("document").ready( function(){
    $("a[name=delete]").click(function(){
        $(this).hide().after('<img src="loading.png" />');
    });
});
</script>

如何使用jQuery获取元素，而无法通过类，ID等引用它

5 个答案: