jQuery点击chbs-button-style-2隐藏祖父兄弟li下的chbs-vehicle-content-price

问题原因 #

1. 原有选择器的.children()属于冗余写法，虽不会直接报错，但如果li的直接子节点结构有变动，会限制查找范围，更稳妥的写法是直接在兄弟li节点内查找目标类。
2. 如果按钮是页面加载完成后动态生成的，直接给.chbs-button-style-2绑定点击事件会失效，需要用事件委托绑定到静态存在的父元素。
3. 调用.html()时如果匹配到的元素集合为空，就会返回undefined，可先通过打印元素长度确认选择器是否命中目标。

调整后代码 #

jQuery(document).ready(function($){
    // 事件委托写法兼容动态生成的按钮，如果按钮都是页面初始渲染就存在，也可以改回原绑定方式
    $(document).on('click', '.chbs-button-style-2', function(e) {
        e.preventDefault(); // 阻止a标签默认的锚点跳转行为，避免页面跳动
        // 查找兄弟li节点下的价格元素，执行隐藏
        const $priceEl = $(this).closest('li').siblings().find('.chbs-vehicle-content-price');
        console.log($priceEl.html()); // 测试取值用，正式环境可删除
        $priceEl.hide();
    });
});

内容的提问来源于stack exchange，提问作者Tayyab Vohra