javascript - jQuery 显示一个类并隐藏所有其他类

Question

这就是我想做的:

我有这个列表 HTML

<table>
  <tr>
    <td class = "point">Point1</td>
  </tr>

  <tr>
    <td class = "point">Point2</td>
  </tr>

  <tr>
    <td class = "meanCurvature">mean Curvature 1</td>
  </tr>

  <tr>
    <td class = "meanValue">mean Value 1</td>
  </tr>
</table>

以及一个带有多个选项的选择器。

然后我有一个 JS

if($("#selector").val() == "strain"){
  $(".point").show();
  $(".meanCurvature").hide();
  $(".meanValue").hide();
}
if($("#selector").val() == "curvature"){
  $(".meanCurvature").show();
  $(".point").hide();
  $(".meanValue").hide();
}
if($("#selector").val() == "average"){
  $(".meanValue").show();
  $(".meanCurvature").hide();
  $(".point").hide();
}

我想知道:现在我只有三个类并且可以处理，但是有没有办法说“显示这个类并隐藏所有其他类”？

Answer 1

如果您的表中行数有限，我建议您这样做。

if($("#selector").val() == "strain"){
  $(".point").show();
  $('td').not('.point').hide();
}
if($("#selector").val() == "curvature"){

  $(".meanCurvature").show();
  $('td').not('.meanCurvature').hide();
}
if($("#selector").val() == "average"){
  $(".meanValue").show();
  $('td').not('.meanValue').hide();
}