时间戳

首页 > 解决方案 > 在同一个文件中分离 Javascript 片段

javascript - 在同一个文件中分离 Javascript 片段

问题描述

对于我正在处理的 WordPress 网站，我在名为 additional.js 的文件中有以下代码：

// Fade in for news posts

jQuery(".elementor-post").each(function(i) {
    jQuery(this).delay(250 * i).fadeIn(1000);
});





// Alphabetical Filter for Products

var $boxes = $('.elementor-posts-container > .elementor-post');

var $btns = $('.alphabet-btn').click(function() {
  var id = this.id;
  if (id == 'all') {
    $boxes.show()
  } else {
    $boxes.hide().filter(function() {
      var re = new RegExp('^' + id, 'i');
      return re.test($(this).text().trim());
    }).show()
  }
  $btns.removeClass('alphabet-active');
  $(this).addClass('alphabet-active');
})

第一部分是我的博客文章的简单定时淡入，第二部分是我的产品页面上字母过滤器的 js。

目前，字母过滤器的行为很奇怪。如果你去这里并单击 B，例如，http://staging.morningsidepharm.com/products/generic-medicines/如果过滤并保留以 B 开头的产品，但之后它会在所有其他产品中消失 -这只是在最初的点击......之后，当你点击它时，它似乎正在发挥应有的作用。

如果我从文件顶部删除第一段代码：

jQuery(".elementor-post").each(function(i) {
    jQuery(this).delay(250 * i).fadeIn(1000);
});

字母搜索中的所有内容都可以正常工作，即使在最初的点击时也是如此。

这让我相信这两段代码存在冲突。

我是否需要以某种方式结束第一段代码？还是我这里还有其他冲突？

我尝试将它们分开并将它们放在不同的 .js 文件中，但我想这不起作用，因为它们在页面加载时仍然会被触发。

任何帮助将不胜感激，我是如此接近！:)

标签： javascriptjquerywordpress

解决方案

在第一部分中，您使用 of 的语法，而在第二部分中，您通过在代码的第一部分中更改by来JQuery()使用另一个测试，这可能会产生冲突。$()JQuery()$()

推荐阅读