javascript - 有没有办法对单个页面上的多个项目使用相同的 jQuery Ajax？

Question

我有一个页面，人们可以用这个将东西添加到他们的“收藏夹”列表中:

$(function(){
    $('.doit-01234').click(function (e) {
      e.preventDefault();
      $.ajax({
        url: "https://www.domain.com/page.php?add=01234",
        type: "GET",
        success: function (data) {
            $(".result-01234").html('<span class="icon-favorite-green"></span>');
        },
        error: function (xhr, ajaxOptions, thrownError) {
            $(".result-01234").html('<span class="icon-favorite-red"></span>');
        },
        timeout: 15000
      });
    });
 });

项目通过 page.php?add=01234 添加。然而，同一页面可能有 20 或 30 个项目，人们可以将这些项目添加到他们的收藏夹中。有没有一种简单的方法可以只为多个 ID 使用此脚本的一个实例，而不是在每个项目之后一遍又一遍地使用相同的 jQuery 代码？

意思是 page.php?add=9999 将在调用 .doit-9999 时更新 .result-9999 并且 page.php?add=5151 会更新 .result-5151 等等...

Answer 1

为您的元素提供一个公共(public)类和一个自定义数据属性:

<div class="ajax doit-01234" data-id="01234"></div>

然后使用 1 个处理程序:

$('.ajax').click(function (e) {
  e.preventDefault();
  var id = $(this).data("id");
  $.ajax({
    url: "https://www.domain.com/page.php?add=" + id,
    type: "GET",
    success: function (data) {
        //Concatenate a selector based on the "id" in the data attribute
        $(".result-" + id).html('<span class="icon-favorite-green"></span>');
    },
    error: function (xhr, ajaxOptions, thrownError) {
        //Concatenate a selector based on the "id" in the data attribute
        $(".result-" + id).html('<span class="icon-favorite-red"></span>');
    },
    timeout: 15000
  });
});