jQuery .each 仅适用于第一项
jQuery .each only works for first item
我正在尝试预加载一个 html 文件,该文件的内容随后将用于遍布网站的多个可扩展按钮。
问题是只有页面第一个按钮的内容以这种方式加载,其余按钮在展开时什么都不显示。
我确实注意到这里还有关于类似问题的其他问题,但我遇到的 none 解决方案似乎适用于这种情况。因此,我们将不胜感激任何帮助。
脚本的相关部分:
$(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');
});
});
});
如果有任何其他信息可能对您有用,请告诉我。
非常感谢您的宝贵时间
假设选择器 a.ajax-link
选择了所有可展开的 link,那么 var thisLink = $("a.ajax-link");
将包含页面上所有可展开的 link 元素的数组。因此,使用 var target = thisLink.data("ajaxtarget");
您只会收到数组中第一个元素的数据属性。
解决方法很简单:
您需要 运行 为每个可扩展 link 循环 foreach
并从每个 link 中获取相应的数据。
$(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');
});
});
}
});
});
我正在尝试预加载一个 html 文件,该文件的内容随后将用于遍布网站的多个可扩展按钮。
问题是只有页面第一个按钮的内容以这种方式加载,其余按钮在展开时什么都不显示。
我确实注意到这里还有关于类似问题的其他问题,但我遇到的 none 解决方案似乎适用于这种情况。因此,我们将不胜感激任何帮助。
脚本的相关部分:
$(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');
});
});
});
如果有任何其他信息可能对您有用,请告诉我。 非常感谢您的宝贵时间
假设选择器 a.ajax-link
选择了所有可展开的 link,那么 var thisLink = $("a.ajax-link");
将包含页面上所有可展开的 link 元素的数组。因此,使用 var target = thisLink.data("ajaxtarget");
您只会收到数组中第一个元素的数据属性。
解决方法很简单:
您需要 运行 为每个可扩展 link 循环 foreach
并从每个 link 中获取相应的数据。
$(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');
});
});
}
});
});