如何通过布尔参数按指定类切换元素集合？代码问题咨询

你说得对，你遇到的核心问题确实是$(this)的指向不对——在你当前的代码里，toggleCountries函数内部的this根本不是指向.person元素，而是全局的window对象，所以$(this).hasClass(country)的判断逻辑完全失效了。

下面给你几种可行的修复方案：

方案1：遍历每个.person元素，手动判断切换 #

直接修改toggleCountries函数，用each遍历所有.person元素，这样在回调函数里的this就会正确指向当前遍历的.person元素：

// 显示所选国家的条目，隐藏其他条目
function toggleCountries(country){
  $(".person").each(function() {
    // 这里的this就是当前的.person元素
    $(this).toggle($(this).hasClass(country));
  });
}

方案2：用filter筛选，逻辑更直观 #

如果你想要更简洁的写法，可以先隐藏所有.person，再筛选出符合条件的显示出来，效果和toggle一致：

function toggleCountries(country){
  // 先隐藏所有.person
  $(".person").hide();
  // 再显示带有对应国家类的元素
  $(".person." + country).show();
}

方案3：优化事件绑定（推荐） #

更规范的做法是把内联的onchange换成jQuery的事件绑定，分离HTML和JS代码，同时避免this指向混乱：
首先修改HTML，去掉内联事件：

<select id="country-select">
  <option value="usa">USA</option>
  <option value="canada">Canada</option>
  <!-- 其他国家选项 -->
</select>

然后编写jQuery事件绑定代码：

$(function() {
  $("#country-select").on("change", function() {
    // 这里的this指向当前的select元素，直接获取选中值
    const selectedCountry = $(this).val();
    $(".person").each(function() {
      $(this).toggle($(this).hasClass(selectedCountry));
    });
  });
});

这种方式不仅代码结构更清晰，后期维护也更方便，还能避免全局函数带来的潜在问题。

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