在同一个文件中分开Javascript片段

Question

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

// 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文件中，但我想这不起作用，因为它们在页面加载时仍然被触发。

任何帮助将不胜感激，我非常接近！ :)

Answer 1

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

Answer 2

好的，我发现了这个问题。

在第一段代码中，我的目标是.elementor-post选择器而不是特定于我想要定位的.elementor-post。这意味着它会影响整个网站的div .elementor-post。

添加容器类并将代码的顶部更改为以下固定的东西：

// Fade in for news posts

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