JS多功能执行

JS multiple function execution

本文关键字：执行 多功能 JS      更新时间：2023-09-26

我使用的是www.onextrapixel.com上的youtube loadingbar工具，它对所有内容都很简单。

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

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

我有多个相同类别的a标签，比如：

<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调用以及success和done函数将重复4次。每次它加载相同的（正确的）内容，并为每个相应的链接执行相同的函数（正确的函数），但它这样做了4次，这导致一切都完全混乱，因为我正在初始化其他对象（初始化了4次）。

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

如果我在侧菜单中只做一个链接，一切都很好。如果我按ID分别初始化每个链接，一切都很好，但如果我把它们都分组在一个类中，就会发生这种情况。我该如何解决此问题？

类以句点开头

$('.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);
});
相关文章：