根据多数据值控制Div显示/隐藏的功能问题求助

你的问题出在取消按钮激活状态时，直接隐藏了对应城市，没检查其他激活按钮是否还包含这个城市。正确的做法是每次按钮状态变化后，重新梳理所有需要显示的城市：

1. 先切换当前按钮的激活状态
2. 收集所有激活按钮里的所有城市，去重后得到需要显示的城市列表
3. 遍历所有城市div，根据是否在显示列表里决定显示或隐藏

修改后的代码如下：

JavaScript #

$('.city-button').click(function() {
    // 先切换当前按钮的激活状态
    $(this).toggleClass('active');
    
    // 收集所有激活按钮里的城市
    const activeCities = new Set();
    $('.city-button.active').each(function() {
        const cities = $(this).data('cities').split(', ');
        cities.forEach(city => activeCities.add(city));
    });
    
    // 处理每个城市的显示/隐藏
    $('.city').each(function() {
        const cityId = $(this).attr('id');
        if (activeCities.has(cityId)) {
            $(this).show();
        } else {
            $(this).hide();
        }
    });
});

CSS #

.city {display: none;}
.active {background-color: yellow; color: black;}

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="city-button" type="button" data-cities="toronto, seattle">toronto, seattle</button>
<button class="city-button" type="button" data-cities="miami, seattle">miami, seattle</button>
<button class="city-button" type="button" data-cities="atlanta">atlanta</button>

<div id="toronto" class="city">toronto</div>
<div id="seattle" class="city">seattle</div>
<div id="miami" class="city">miami</div>
<div id="atlanta" class="city">atlanta</div>

逻辑说明： #

• 用toggleClass简化按钮激活状态的切换，不用写冗余的if-else判断
• 用Set收集城市，自动去重，避免重复统计同一城市
• 最后统一处理所有城市的显示状态，确保只要有任意一个激活按钮包含该城市，就会显示它；没有任何激活按钮包含时才隐藏

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