为WordPress文章归档页添加脚本：如何不影响其他文章

当然可以实现，不用逐个加脚本，问题出在你的代码用了全局选择器，会选中归档页里所有的.slick-slider和.slider-title，导致操作互相影响。只要把选择范围限定在当前触发事件的滑块所属的文章容器内就行：

修改后的代码如下：

<script>
jQuery(document).ready(function($) {
    $('.slick-slider').on('afterChange', function(event, slick, currentSlide) {
        // 找到当前滑块所在的文章容器，再定位里面的.slider-title
        var $sliderTitle = $(this).closest('article').find('.slider-title');
        if (currentSlide === 0) {
            $sliderTitle.addClass('overlay-slider');
        } else {
            $sliderTitle.removeClass('overlay-slider');
        }
    });
});
</script>

关键修改说明： #

• $(this) 指的是当前触发afterChange事件的那个.slick-slider元素，也就是你正在操作的那个文章里的滑块
• .closest('article') 是找到这个滑块最近的<article>父容器（WordPress归档页里每个文章通常都包裹在<article>标签里），如果你的主题用了自定义的文章容器类（比如.post-item），把article换成对应的类名就行
• .find('.slider-title') 只在当前文章容器内查找标题元素，不会影响其他文章里的同类型元素

如果之前尝试动态ID效果不好，大概率是ID的定位逻辑有问题，用这种基于上下文的局部选择更可靠，适配性也更强。

内容的提问来源于stack exchange，提问作者Aj G