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

您可以使用：not selector，例如：

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

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

Answer 2

你可能想要这样的东西

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

Answer 3

如果是我，我会说

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

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

<table class="myTable">
...

然后javascript将是

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

您可以使用高级选择器

进一步改善这一点

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

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

Answer 4

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

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

Answer 5

您可以将not()用作selector或method来选择除指定元素以外的所有元素。
另一种方法是使用multiple elements selector，例如
$(".point, .meanValue").hide();但是如果你在这种情况下有很多课程，那就不推荐了。请查看此工作示例：

＆＃13;

$("#selector").change(function(){
    if($(this).val() == "strain"){
      $(".point").show();
      $("td:not(.point)").hide();
    }
    if($(this).val() == "curvature"){
      $(".meanCurvature").show();
      $(".point, .meanValue").hide();
    }
    if($(this).val() == "average"){
      $(".meanValue").show();
      $("td:not(.meanValue)").hide();
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selector">
    <option disabled selected>Select option</option>
    <option>strain</option>
    <option>curvature</option>
    <option>average</option>
</select>
<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>

＆＃13;

Answer 6

您可以通过显示所有td来执行此操作，然后使用not()功能隐藏具有其他类的那些td。或者，您可以隐藏所有selector，然后显示您选择的课程。

在此之前，您需要使用简单的switch将function apply() { var selectedVal = $("#selector").val(); switch (selectedVal) { case "strain": selectedVal = "point"; break; case "curvature": selectedVal = "meanCurvature"; break; case "average": selectedVal = "meanValue"; break; } $("td").show().not("." + selectedVal).hide(); } apply();值转换为所需的类。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selector" onchange="apply()">
<option>strain</option>
<option>curvature</option>
<option>average</option>
</select>
<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>

switch

如果您可以更改selector值以匹配类，则可以更轻松地删除function apply() { $("td").show().not("." + $("#selector").val()).hide(); } apply();：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selector" onchange="apply()">
<option value="point">strain</option>
<option value="meanCurvature">curvature</option>
<option value="meanValue">average</option>
</select>
<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>

.loop-entry-content{
position:relative;
max-height:{{some desired height}};
}
.home-readmore-button{
position:absolute;
bottom: 10px;
right:10px;
}

Answer 7

我的方法是将所有这些类组合成一个选择器。将它们全部隐藏，然后根据与类

的值匹配的存储对象过滤要显示的对象

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

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

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

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

7 个答案: