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

我有一个页面上的故事列表，每个页面上都有几个用于不同动作的jQuery按钮。当点击按钮时，我需要知道它被点击的故事。如何知道在列表上下文中点击了哪个jQuery按钮

目前我的每个故事都包含在div中，ID为story_<story_id>，然后在处理程序中遍历并解析出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="report_story_123"

有没有一个标准的方法来处理这个问题？

来源

2010-08-22 cope360

你可以做到这一点使用数据属性以及可能完全消除父ID的需要：

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

：

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

它的click事件像这样使用.attr()然后得到You can give it a try here

来源

2010-08-22 13:02:32

尼斯。我了解了数据属性和jsfiddle。 – cope360 2010-08-22 21:08:47

我不认为真的有这样做的标准方式。你的技术看起来很好。

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

来源

2010-08-22 12:58:09

我会按照你现在的样子去做，但是用代替。

来源

2010-08-22 13:03:20 SLaks

尝试这样的事情。

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

和JavaScript：

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

来源

2010-08-22 13:13:57 turbod

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

回答

相关问题