jQuery Attribute="Value"替代方案：点击按钮显示匹配name属性的Div

嘿，我完全懂你的需求！你想实现点击不同按钮时，隐藏所有带.bill-cleaning或.type-cleaning类的div，只显示那些name属性和按钮ID一致的元素，而且还不能破坏原来的类（因为要用来写CSS）、也不能用重复ID（毕竟ID是唯一的）。你已经找对了方向——用属性选择器，只是差了动态获取当前按钮ID这一步！

核心修正思路 #

• 在按钮的点击事件里，用$(this)拿到当前被点击的按钮元素
• 获取这个按钮的ID值：用原生JS的this.id更高效，当然jQuery写法$(this).attr('id')也能用
• 把这个ID值动态拼接到属性选择器里，替换你原来写死的residential

修正后的完整可运行代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="residential" class="type-btn">Residential</button>
<button id="comercial" class="type-btn">Comercial</button>
<button id="boat" class="type-btn">Boat</button>

<div name="residential" class="type-cleaning" style="display:none">Residential</div>
<div name="comercial" class="type-cleaning" style="display: none">Comercial</div>
<div name="boat" class="type-cleaning" style="display:none">Boat</div>
<div name="residential" class="bill-cleaning" style="display: none">Bill Residential</div>
<div name="boat" class="bill-cleaning" style="display: none">Bill Boat</div>

<script>
$('.type-btn').click(function(){
    // 隐藏所有目标类的div
    $('.bill-cleaning, .type-cleaning').hide();
    // 动态获取当前按钮的ID，拼接成属性选择器
    const targetName = this.id;
    $(`div[name="${targetName}"]`).show();
});
</script>

细节说明 #

• this.id是原生JavaScript写法，比jQuery的$(this).attr('id')执行效率更高，两种写法都能实现需求
• 用ES6模板字符串（`div[name="${targetName}"]`）拼接选择器，比传统字符串拼接更清晰，不容易出错
• 这个方案扩展性很强：以后新增按钮和对应div时，只要保证按钮ID和div的name属性一致，不用修改JS代码就能自动适配

额外原生JS方案（可选） #

如果以后想脱离jQuery实现同样功能，也可以用纯原生JS写法：

document.querySelectorAll('.type-btn').forEach(btn => {
    btn.addEventListener('click', function(){
        // 隐藏所有目标元素
        document.querySelectorAll('.bill-cleaning, .type-cleaning').forEach(el => el.style.display = 'none');
        // 显示对应name的元素
        document.querySelectorAll(`div[name="${this.id}"]`).forEach(el => el.style.display = 'block');
    });
});

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