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并.result-9999更新.doit-9999等等时，page.php?add=5151的含义会更新.result-5151，等等......

Answer 1

为您的元素提供公共类和自定义数据属性：

<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
  });
});

Answer 2

像这样创建这个函数：

  function Name (e) {
  var code =  01234;//extract your code like 1234 here by splitting or..
  e.preventDefault();
  $.ajax({
    url: "https://www.domain.com/page.php?add=01234",
    type: "GET",
    success: function (data) {
        $('.result-'+code).html('<span class="icon-favorite-green"></span>');
    },
    error: function (xhr, ajaxOptions, thrownError) {
        $('.result-'+code).html('<span class="icon-favorite-red"></span>');
    },
    timeout: 15000
  });
});

现在你要调用这个函数，你可以像这样调用： HTML：

<button onclick="Name(this);">Hello</button>

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

2 个答案: