jquery在点击时从html属性中提取数据

Question

当我有多个按钮点击相同的“id”时，我正在尝试创建一种从自定义HTML属性中提取信息的简单方法。

我想知道我是否可以从我按下的特定按钮传递'url'属性值。现在，它总是抓住第一个......

代码：

<script>
$(document).ready(function() { 
    $(":input[id='alarm']").click(function() {
        alert($("input[url]").attr("url"));
    });
});
</script>

<table id='alarms'>
    <th>ID</th>
    <th>CaseID</th>
    <th>Alarm</th>

    <tr>
        <td width="50">2040</td>
        <td width="180">TEST-111110-123-R4</td>
        <td><input id="alarm" type="button" value="Cancel" url="../silencealarm.php?id=2040"></td>
    </tr>
        <td width="50">2042</td>
        <td width="180">TEST-111110-123-R6</td>
        <td><input id="alarm" type="button" value="Cancel" url="../silencealarm.php?id=2042"></td>
    </tr>
</table>

Answer 1

使用this（虽然不使用重复的ID）

$(document).ready(function() { 
    $(":input[id='alarm']").click(function() {
        alert($(this).attr("url"));
    });
});

Answer 2

在自己的处理程序中使用自定义HTML属性前缀data-*时，这会向元素本身显示，因此只需使用$(this).data("url")

访问它

 $(":input[id='alarm']").click(function() {
        alert($(this).data("url"));
    });

不要使用重复的ID，它会使您的HTML无效，您的处理程序将只附加到第一个实例，所以改为将其更改为类。

标记

<tr>
        <td width="50">2040</td>
        <td width="180">TEST-111110-123-R4</td>
        <td><input class="alarm" type="button" value="Cancel" data-url="../silencealarm.php?id=2040"></td>
    </tr>
        <td width="50">2042</td>
        <td width="180">TEST-111110-123-R6</td>
        <td><input class="alarm" type="button" value="Cancel" data-url="../silencealarm.php?id=2042"></td>
    </tr>

脚本

$(":input.alarm").click(function() {
        alert($(this).data("url"));
});

Demo

Answer 3

只需将您的代码简单地更改为：

$(document).ready(function() { 
    $(":input[id='alarm']").click(function() {
        alert($(this).attr("url")); //or
        alert($(this).prop("url"));
    });
});