Question

我使用的是www.onextrapixel.com中的youtube loadingbar工具，对于所有内容都非常简单。

但是，我有多个<a>标记具有不同的href属性，并将使用不同的内容加载内容区域（目标）。问题是当我将loadingbar函数初始化为类时，比如：

$('ajax-call').loadingbar(options);

我有多个同一类的标签说：

<a id ="link1" class = "ajax-call" href="hello1.html" data-type="POST" data-target="#Content_Area">Link 1</a>
<a id ="link2" class = "ajax-call" href="hello2.html" data-type="POST" data-target="#Content_Area">Link 2</a>
<a id ="link3" class = "ajax-call" href="hello3.html" data-type="POST" data-target="#Content_Area">Link 3</a>
<a id ="link4" class = "ajax-call" href="hello4.html" data-type="POST" data-target="#Content_Area">Link 4</a>

在这个例子中，我有4个链接，因此ajax调用以及成功和完成函数重复4次。每次加载相同（正确）的内容并为每个相应的链接执行相同的功能（正确的功能），但它会这样做4次，这导致完全搞砸一切，因为我正在初始化其他对象（初始化4）次）。

所有内容看起来都是正确的，但内容区域内没有任何内容（模态等）。

如果我只在侧面菜单中创建一个链接，那么一切正常。如果我通过ID分别初始化每个链接，一切正常，但如果我将它们全部分组在一个类中，就会发生这种情况。我该如何解决这个问题？

Answer 1

类以句点

开头

$('.ajax-call').loadingbar(options);

看起来这个插件编写得很糟糕，它不会返回this.each(function()..它只是

$.fn.loadingbar = function(options){
    el   = $(this),
    href = el.attr("href"),
    target = el.data("target"),
    ...etc

所以在元素集合上调用它可能无法正常工作，请尝试

$('.ajax-call').each(function() {
    $(this).loadingbar(options);
});

JS多功能执行

1 个答案: