在jQuery中触发共享类单个组件事件而不影响其他组件

当然可以实现，问题出在你的JavaScript代码使用了全局选择器，导致点击箭头时操作了页面上所有的.slide和.on元素。只需在事件处理函数中限定操作范围为当前点击箭头所属的滑块容器内的元素即可，无需修改类名或添加ID。

修改后的JavaScript代码如下：

$('.slider').each(function() {
    // 缓存当前滑块容器的jQuery对象
    const $currentSlider = $(this);
    
    $currentSlider.find('.arrow-left').on("click", function() {
        // 仅操作当前滑块内的.slide元素
        $currentSlider.find('.slide').animate({
            left: "-=33%"
        });
        // 仅操作当前滑块内的.on元素
        const $currentOn = $currentSlider.find('.on');
        $currentOn.next().addClass('on');
        $currentOn.removeClass('on');
    });

    $currentSlider.find('.arrow-right').on("click", function() {
        // 仅操作当前滑块内的.slide元素
        $currentSlider.find('.slide').animate({
            left: "+=33%"
        });
        // 仅操作当前滑块内的.on元素
        const $currentOn = $currentSlider.find('.on');
        $currentOn.prev().addClass('on');
        $currentOn.removeClass('on');
    });
});

关键修改说明： #

• 在.slider的循环中缓存当前滑块的jQuery对象$currentSlider，后续所有操作都基于这个上下文
• 将全局选择器$('.slide')、$('.on')替换为$currentSlider.find('.slide')、$currentSlider.find('.on')，确保只选中当前点击箭头所在滑块内的对应元素
• 调整.on类的切换逻辑，先定位当前激活元素再操作其前后元素，避免重复选择引发的逻辑错误

修改后，点击任意滑块的箭头，只会控制该滑块内的幻灯片移动和激活状态切换，不会影响另一个滑块。

内容的提问来源于stack exchange，提问作者Robert Carmichael