Question

我在页面上有一个故事列表，每个故事都有几个用于不同操作的jQuery按钮。单击该按钮时，我需要知道它被点击的故事。

目前，我将每个故事都包含在div中，其格式为story_<story_id>，然后在处理程序中我遍历并解析出来。

<div id="story_1" class="story">
    Blah blah blah
    <input type="button" class="report-button" value="Report">
</div>

<div id="story_2" class="story">
    Blah blah blah
    <input type="button" class="report-button" value="Report">
</div>

<!-- more stories -->

<div id="story_9" class="story">
    Blah blah blah
    <input type="button" class="report-button" value="Report">
</div>

<script type="text/javascript">
$(function() {
    $('.report-button')
        .button()
        .click(function() {                
            var id_str = $(this).parents(".story").attr("id");
            var id = id_str.slice(6)
            alert(id);
        });
});
</script>

这很有效，但我想知道这种技术是否有缺点，或者是否有更好的方法。

我也想过：

使用带有ID
将故事ID放在按钮ID中并解析，等等id="report_story_123"

有没有一种标准的方法可以解决这个问题？

Answer 1

您也可以使用数据属性来完成，可能完全不需要父ID：

<input type="button" class="report-button" data-id="1" value="Report">

然后在click事件上使用.attr()获取它，如下所示：

$(function() {
  $('.report-button').button()
                     .click(function() {                
                       alert($(this).attr('data-id'));
                     });
});

You can give it a try here

Answer 2

我会按照您目前的方式进行操作，但请将.parents替换为.closest。

Answer 3

尝试这样的事情。

<input type="button" class="report-button" name="story_9" value="Report">

和javascript：

var id_str = $(this).attr("name");

Answer 4

我认为没有一种标准的方法可以做到这一点。你的技术似乎很好。

现在，如果您要将此id提交给服务器，那么可能使用带有隐藏字段和提交按钮的表单更加适应，因为您将不再需要进行任何解析或依赖嵌套到DOM元素的顺序提取这个id。

如何知道在列表上下文中单击了哪个jQuery按钮

4 个答案: