JQuery - 检查是否单击了每个动态添加的按钮

Question

我通过JQuery Ajax和PHP脚本将按钮添加到元素中。添加的按钮数量是可变的。我希望能够在启用其他操作之前检查是否已单击每个按钮。

PHP脚本中的相关代码如下，每个按钮都有一个递增的ID：

$i = 1;
while ($row = mysql_fetch_array($result)) {
echo "<div class='dr_feedback_btn' id='dr_" . $i++ . "'>Feedback</div>";
}

我在JQuery中有以下代码，用于基于按钮类的按钮单击：

    $('#dr_container').on('click', '.dr_feedback_btn', function() {
         ...
    });

下图显示了反馈按钮。

任何帮助表示感谢。

Answer 1

单击时，您可以为每个按钮添加$('#dr_container').on('click', '.dr_feedback_btn', function() { $(this).addClass('clicked'); if ($('.dr_feedback_btn').not('.clicked').length === 0) { // all are clicked, so enable your other action here } // other click processing here }); 类，然后测试是否有任何按钮没有该类：

"clicked"

{{1}}类当然可以按照你想要的名称命名，并且不需要存在于你的CSS中，尽管你可以考虑给用户一些已经点击了哪些按钮的可视指示（并且你可以使用新类。）

Answer 2

您需要一种方法来存储按钮是否被点击之前然后再点击的信息，知道触发其他东西的显示。您可以通过多种不同方式存储该数据。一种是使用jquery的数据属性：

$('#dr_container').on('click', '.dr_feedback_btn', function() {
    $(this).data('clicked', true)
    var buttons = $('.dr_feedback_btn')
    var clickedButtons= buttons.filter(isClicked)
    if (clickedButtons.length === buttons.length) {
        // do your magic here
    }
});

function isClicked(idx, el) {
    return $(el).data('clicked') === true
}

您还可以更多地依赖选择器并使用html的实际数据属性：

$('#dr_container').on('click', '.dr_feedback_btn', function() {
    $(this).attr('data-clicked', 'true')
    var buttons = $('.dr_feedback_btn')
    var clickedButtons= $('dr_feedback_btn[data-clicked=true]')
    if (clickedButtons.length === buttons.length) {
        // do your magic here
    }
});