Question

我有一个附加到btn-group的jquery函数，如下所示：

<div class="row">
    <!-- Vote button row -->
    <div class="span8" id="votenumbers">
        <div class="btn-group">
            <button class="btn" id="votebutton" data-votevalue="1">1</button>
            <button class="btn" id="votebutton" data-votevalue="2">2</button>
            <button class="btn" id="votebutton" data-votevalue="3">3</button>
            <button class="btn" id="votebutton" data-votevalue="4">4</button>
            <button class="btn" id="votebutton" data-votevalue="5">5</button>
            <button class="btn" id="votebutton" data-votevalue="6">6</button>
            <button class="btn" id="votebutton" data-votevalue="7">7</button>
            <button class="btn" id="votebutton" data-votevalue="8">8</button>
            <button class="btn" id="votebutton" data-votevalue="9">9</button>
            <button class="btn" id="votebutton" data-votevalue="10">10</button>
        </div>
    </div>
</div>

<!-- Vote button row ends -->

这是用于为每个按钮分配功能的javascript。

$('#votebutton').each(function(){
    $(this).click(function(){
        var votevalue = $(this).data('votevalue');
        var filename = $('.mainimage').data('filename');
        var category = $('.mainimage').data('category');
            $.ajax({
                type: 'POST',
                url: '?category=' + category,
                data: {
                    "votevalue" : votevalue,
                    "filename" : filename
                },
                success: function(data){
                    $('body').html(data);
                }
        }); // end ajax
    }); // end click
}); // end each

现在我的问题是只有第一个按钮对点击事件做出反应。另一个没有。不知道为什么。

Answer 1

您为所有按钮的“id”属性指定了相同的值。 Id属性应该在整个HTML页面中是唯一的。您使用的选择器$('#votebutton')是一个id选择器，它返回一个元素。这就是单击处理程序仅针对您的一个按钮执行的原因。您应该为每个按钮分配不同的id值，或者根本不分配id。

您可以完全删除按钮上的id属性，然后使用类选择器来查找按钮：

$('#votenumbers .btn').each(function() { $(this).click(...) ... });

只有第一个按钮对点击事件做出反应

1 个答案: