同一文件中的Javascript分开

时间:2018-09-03 16:43:24

标签: javascript jquery wordpress

对于我正在工作的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文件中,但我猜想那是行不通的,因为它们在页面加载时仍会被触发。

任何帮助将不胜感激,我很亲切! :)

2 个答案:

答案 0 :(得分:0)

在第一部分中,您使用JQuery()的语法,在第二部分中,通过在代码的第一部分中将$()更改为JQuery(),使用另一个$()测试,也许那会引起冲突。

答案 1 :(得分:0)

好的,我发现了问题。

在第一部分代码中,我以.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);
});