jQuery实现点击按钮仅操作所在div内同class元素的显示隐藏问题

AI 小北

2026-10-2

问题原因

你原来的代码直接使用$(".old")、$(".older")这种全局选择器，会匹配页面上所有对应类名的元素，所以点击任意按钮会修改所有模块的数值展示。

解决方法

只需要在点击事件触发时，先定位到当前按钮所属的linePrice容器，再限定在这个容器内查找要操作的元素即可，修改后的JS代码如下：

$(function() {
    // 初始化隐藏所有older元素，原有逻辑无需修改
    $(".older").hide();

    $(".ofertas").on('click', function () {
        // 查找当前点击按钮所属的独立linePrice模块
        const $currentContainer = $(this).closest('.linePrice');
        // 仅在当前模块内操作对应元素
        $currentContainer.find(".old").hide();
        $currentContainer.find(".older").show();
        // 可选扩展：同步切换按钮选中样式
        $currentContainer.find('.offersList li').removeClass('select');
        $(this).addClass('select');
    });

    $(".desconto").on('click', function () {
        const $currentContainer = $(this).closest('.linePrice');
        $currentContainer.find(".old").show();
        $currentContainer.find(".older").hide();
        // 可选扩展：同步切换按钮选中样式
        $currentContainer.find('.offersList li').removeClass('select');
        $(this).addClass('select');
    });
});