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

这就是我想做的：

我有这个清单

<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>

---

我想知道：现在我只有三个类，它是可处理的，但是有没有一种方法可以说“显示这个类并隐藏所有其他类”

您可以使用：not选择器，例如：

$("td:not(.classToActuallyShow)").hide();

---

将选择所有表数据（td）元素并隐藏它们，除非它们具有特定的类。

您可能需要类似的内容

if($("#selector").val() == "strain"){
  $(".point").show();
  $(".point").parent().siblings('tr').children('td').hide();
}

---

如果是我，我会说

$("td").hide();
$(".desiredClass").show();

这将首先隐藏所有表元素，然后显示您感兴趣的元素。但是，我也会为您的表分配一个类，这样您就可以避免干扰页面上的其他表：

<table class="myTable">
...

---

您可以使用高级选择器进一步改进此功能

$(".desiredClass").show()
$(".myTable td:not(.desiredClass)").hide()

---

上述方法可以通过隐藏然后显示所需元素来避免任何可能的“口吃”。

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

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();
}

您可以使用

not（）

as或as选择除指定元素之外的所有元素。
另一种方法是使用，比如

$（.point.meanValue”）.hide（）但在这种情况下，如果有很多类，则不建议使用它。

检查此工作示例：


$（“#选择器”）.change（函数（）{
如果（$（this.val（）=“应变”）{
$（“.point”）.show（）；
$（“td:not（.point）”）.hide（）；
}
if（$（this）.val（）=“曲率”）{
$（“.meanCurvature”）.show（）；
$（“.point.meanValue”）.hide（）；
}
if（$（this.val（）=“average”）{
$（“.meanValue”）.show（）；
$（“td:not（.meanValue）”）.hide（）；
}
});

选择选项
拉紧
弯曲度
平均的
第一点
第2点
平均曲率1
平均值1
您可以通过显示所有
td
s来实现，然后使用
not（）
函数隐藏具有其他类的类。或者，您可以隐藏所有
td
s，然后显示所选的类

在此之前，您需要使用一个简单的
开关
将
选择器
值转换为所需的类


函数apply（）{
var selectedVal=$（“#选择器”）.val（）；
开关（selectedVal）{
案例“应变”：
selectedVal=“点”；
打破
案例“曲率”：
selectedVal=“平均曲率”；
打破
案例“平均值”：
selectedVal=“meanValue”；
打破
}
$（“td”）.show（）.not（“.”+selectedVal.hide（）；
}
应用（）

拉紧
弯曲度
平均的
第一点
第2点
平均曲率1
平均值1
我的方法是将所有这些类合并到一个选择器中。将它们全部隐藏，然后根据与类的值匹配的存储对象筛选要显示的对象

var classMatches ={
   'strain':'point',
   'curvature':'meanCurvature',
   'average': 'meanValue'    
};

var matchingClass = classMatches[$("#selector").val()];

$('.point, .meanCurvature, .meanValue')
    .hide()
    .filter('.'+ matchingClass ).show()

$（'selector'）.show（）$（'selector1，selector2，…）.hide（）
在
@charlietfl上没有
值，我在示例中使用了该值，因为他的问题有“（$（“#选择器”）.val（）=”应变“，这是一个单独的条件。。。可能是

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();
}

var classMatches ={
   'strain':'point',
   'curvature':'meanCurvature',
   'average': 'meanValue'    
};

var matchingClass = classMatches[$("#selector").val()];

$('.point, .meanCurvature, .meanValue')
    .hide()
    .filter('.'+ matchingClass ).show()