onclick时如何区分同一个类的多个href？答案

【问题标题】：How to distinguish multiple href with the same class when onclick?onclick时如何区分同一个类的多个href？
【发布时间】：2016-07-25 20:46:34
【问题描述】：

我在一个页面上有多个按钮（a href 链接），用于对产品进行投票或否决。

我刚刚做了一些生成相同链接按钮结构的示例代码。

<?php for($i=0;$i<30;$i++){ ?>
<a data-id="<?php echo $i; ?>" href="#" class="vote">
    <button class="btn-no btn-vote">Yes</button>
</a>
<?php } ?>

我有这个处理点击本身的 jQuery 脚本：当我点击元素时，我能够获得正确的 id，但随后它会在页面上的其余元素中运行，并倒计时。

在这个例子中，它给了我 30 个弹出窗口和所有数字。我只需要点击元素的 id。

<script>
    $('.message').hide();

    $('.vote').click(function(e){

        e.preventDefault();

        var element = this; 
        var id = $(element).closest('span').data('id');

        alert(id);

    });
 </script>

【问题讨论】：

标签： jquery

【解决方案1】：

  
$('.vote').click(function(e){

  e.preventDefault();

  var element = $(this); 
  var id = $(element).data('id');

  alert(id);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a data-id="1" href="#" class="vote">
    <button class="btn-no btn-vote">Yes</button>
</a><br/>
<a data-id="2" href="#" class="vote">
    <button class="btn-no btn-vote">Yes</button>
</a><br/>
<a data-id="3" href="#" class="vote">
    <button class="btn-no btn-vote">Yes</button>
</a><br/>
<a data-id="4" href="#" class="vote">
    <button class="btn-no btn-vote">Yes</button>
</a><br/>
<a data-id="5" href="#" class="vote">
    <button class="btn-no btn-vote">Yes</button>
</a><br/>
<a data-id="6" href="#" class="vote">
    <button class="btn-no btn-vote">Yes</button>
</a><br/>
<a data-id="7" href="#" class="vote">
    <button class="btn-no btn-vote">Yes</button>
</a>

您的脚本应该如下所示。不需要 .closest('span') ，因为这样的 data-id 属性在 'a' 标记本身中。

<script>
$('.message').hide();

$('.vote').click(function(e){

    e.preventDefault();

    var element = $(this); 
    var id = $(element).data('id');

    alert(id);

});
</script>

【讨论】：

没有像#divId这样的元素，这就是他使用class的原因。
我们也可以在类上使用这个脚本。不需要#divId。看看我的回答我刚刚更新了。

【解决方案2】：

检查一下：

                <html>
                <head>
                    <script src="js/jquery-1.12.1.js"></script>
                </head>
                <body>
                    <?php for($i=1;$i<12;$i++){ ?>
                            <a data-id="<?php echo $i; ?>" href="#" class="vote"><button class="btn-no btn-vote">Yes</button></a>
                    <?php } ?>
                    <script>
                        $('.message').hide();   
                        $('.vote').click(function(e) {
                                e.preventDefault();
                                var id = $(this).data('id');
                                alert(id);
                        });
                    </script>
                </body>
            </html>

【讨论】：

【解决方案3】：

您应该在 HTML 中使用唯一 ID。

将data-id="1" 更改为data-id="<?php echo $i; ?>"

您还可以通过和删除跨度来缩短代码，因为您的代码中没有跨度。

alert($(this).data('id'));

这是一个有效的jsFiddle

【讨论】：

为什么这个可行的答案被否决了？我永远不会明白这一点。