javascript - Ajax 调用后刷新按钮样式 - 使用相同的 CSS 类

Question

根据 this answer和许多其他关于 SO 我已经看到了在元素上刷新 Ajax 内容(在成功调用之后)的方法，如果它有一个 ID。但是，我需要在类里面获得这种行为。我尝试过使用 $.each、foreach、this 等的变体，但它们都产生相似(不正确)的结果。谁能教我如何只刷新当前点击的项目的内容？

我就是这样做的，但在点击报告按钮后，又出现了 16 个按钮，因为它调用了该类的所有按钮。

<!--html:-->
<!-- If userReported function returns true, then user already reported this item. -->
<!-- This code block runs in a loop of about 10-17 iterations -->
            <span class="report-btn_wrapper refresh-report-after-ajax">
            <i <?php if (userReported($product_ref)) { ?> title="Report this item" class="fa fa-flag-o report-btn" <?php } else { ?> title="You reported this item" class="fa fa-flag report-btn" <?php } ?> data-id="<?=$product_ref;?>" data-uid="<?=$user_ref;?>"></i>
            </span>

//javascript:
$('body').on('click', '.report-btn', function (e) {
    var id = $(this).data('id');
    var uid = $(this).data('uid');
        $.ajax({
            type: 'POST',
            url: 'report.inc.php',
            data: {
              product_ref : id,
              user_ref : uid
            },
            success: function (html) {
                //give user a notification message
                notification(html, 0);
                //refresh the button (if user clicked, button is red, if user did not click, button is grey)
                $(".refresh-report-after-ajax").load(window.location + " .refresh-report-after-ajax"); 
            }
        });
        e.preventDefault();
    });

发生了什么:

我要实现的目标:

Answer 1

如果您只想更新被点击的按钮，只需获取对它的引用并调用周围元素的更新即可:

$('body').on('click', '.report-btn', function (e) {
    var $button = $(this);
    var id = $button.data('id');
    var uid = $button.data('uid');
    $.ajax({
        type: 'POST',
        url: 'report.inc.php',
        data: {
          product_ref : id,
          user_ref : uid
        },
        success: function (html) {
            //give user a notification message
            notification(html, 0);
            //refresh the button (if user clicked, button is red, if user did not click, button is grey)
            $button.closest(".refresh-report-after-ajax").load(window.location + " .refresh-report-after-ajax"); 
        }
    });
    e.preventDefault();
});

更新

您可以直接在 JavaScript 中执行更改，而不是 .load(...) 调用，因为您知道结果应该是什么:

$button.toggleClass('fa-flag-o fa-flag').attr('title', $button.hasClass('fa-flag') ? 'You reported this item.' : 'Report this item');