jQuery .each 仅适用于第一项

Question

我正在尝试预加载一个 html 文件，其内容随后将用于遍布整个网站的几个可扩展按钮。
问题是只有页面的第一个按钮的内容以这种方式加载，其余按钮在展开时什么也不显示。
我确实注意到这里还有其他关于类似问题的问题，但是我遇到的所有解决方案似乎都不适用于这种情况。因此，任何帮助将不胜感激。
脚本的相关部分:

$(document).ready(function () {
     
    var thisLink = $("a.ajax-link");
    var targetUrl = thisLink.attr("data-href");
    var target = thisLink.data("ajaxtarget");
 
    $(target).each(function( index, btn ) {
        $(this).load(targetUrl, function () {
          console.log('Success');
        });
      });
    
});

如果有任何其他信息可能对您有用，请告诉我。
非常感谢您的宝贵时间

Answer 1

假设选择器 a.ajax-link选择所有可扩展链接，然后 var thisLink = $("a.ajax-link");保存页面上所有可扩展链接元素的数组。因此与 var target = thisLink.data("ajaxtarget");您只会收到数组中第一个元素的 data 属性。
解决方法很简单:
您需要运行您的 foreach循环每个可扩展链接并从这些链接中的每一个获取相应的数据。

$(document).ready(function () {
   $.ajax({
     url: "http://example.com/path/to/html/file",
     dataType: "html",
     success: function(html) {
        $.each($("a.ajax-link"), function() {
          let targetUrl = $(this).data('href');
          let $target = $($(this).data('ajaxtarget'));
          $target.load(targetUrl, function() {
            console.log('success');
          });
        });
     }
    });
});