【问题标题】:Perform JS function on all ID's on a page对页面上的所有 ID 执行 JS 函数
【发布时间】:2016-05-02 15:52:27
【问题描述】:
   var hslider_slider_id = jQuery('.hslider_misc_holder').attr('id').slice(8);
   activate_width_checker(1080, 1080, 'responsive', hslider_slider_id);

这段代码覆盖了 fullpage.js 和 WP Hero Slider 之间的冲突我有两个带有两个滑块的页面。此代码在第一个滑块上被成功调用,但不是第二个。我需要重构代码以确保在第二个滑块上调用 JS 函数,该滑块具有相同的 ID .hslider_misc_holder,而不仅仅是第一个。我是否需要通过循环运行它才能实现这一点??

或者使用.map

冲突导致英雄滑块无法加载完整尺寸。

蚂蚁

【问题讨论】:

  • 加载第二个页面时再次调用它。
  • 对不起,如果我不清楚每页上有两个滑块,每页上的第二个滑块不受该功能的影响。只需通过循环运行该函数即可在 ID 的所有实例上调用它。不是一个伟大的程序员这就是我问的原因!!!
  • 您是否尝试将代码封装在 IIFE 中以避免命名冲突(例如 (function(){}()))?

标签: javascript jquery wordpress fullpage.js


【解决方案1】:

首先,.前缀表示一个类而不是一个 ID。 # 前缀应该用于通过 id 选择元素。

更新您的问题以包含 HTML sn-p,以便我可以理解结构。

听起来您想按类选择多个元素,然后循环遍历这些元素并将 id(或对对象的直接引用)传递给函数。

    var sliders = jQuery('.hslider_misc_holder');
    $.each(sliders, function(idx, slider) {
            activate_width_checker(1080, 1080, 'responsive', $(slider).attr('id'));
    });

【讨论】:

  • 对不起,它是代码所示的类!
  • 我只希望第二个滑块在不被称为第一个滑块的时候受到该功能的影响。只需要遍历页面上该类的所有实例即可。
  • 该类是滑块父元素的一部分
  • 是的,我添加了 .each() 函数来循环代码,然后调用页面上该类的所有实例。感谢所有帮助。
【解决方案2】:

您可以在选择器中使用正则表达式。例如,onclick 事件。 关于html中的两个元素:

<div id="div1">DIV1</div> <div id="div2">DIV2</div>

现在在 JavaScript 中:

`

$('[id ^= DIV').on('click', function(){alert();});

`

REGEX 选择器允许在 html 中查找所有具有相同模式的 id。

希望对你有帮助。

【讨论】:

    【解决方案3】:

    --- 更新

    当您调用.attr("id") 时,jQuery 将只返回集合中第一个元素的 ID。您将不得不对套装进行查看:

    $(".hslider_misc_holder").each(function () {
      activate_width_checker(1080, 1080, 'responsive', $(this).attr("id").slice(8));
    });
    

    【讨论】:

      最近更新 更多