Отдельные части Javascript в одном файле
У меня есть следующий код внутри файла с именем 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, но я думаю, это не сработает, потому что они оба все еще запускаются при загрузке страницы.
Любая помощь будет принята с благодарностью, я так близок! :)
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
В первой части вы используете синтаксис JQuery(), а во второй вы используете другой тест $(), заменяя JQuery() на $() в первой части вашего кода, возможно, это вызывает конфликт.
Хорошо, я нашел проблему.
В первом фрагменте кода я нацелен на селектор .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);
});
Спасибо, Кике. К сожалению, это не работает ... Думаю, мне нужно использовать jQuery вместо $, потому что это Wordpress. Однако я пробовал оба способа для обеих областей кода, и ни один из них не работал должным образом ... Вы знаете, как я могу узнать, что происходит? Спасибо за вашу помощь :)