javascript - JQuery 隐藏所有元素

Question

如果 <span> 之一，我想隐藏表格行标签具有 value 中的类变量。

变量 val 来自选择框。

$(".hostgroup").change(function(event) {
  var val = $(this).val();
  console.log(val);
  $("#groups > span").each(function() {
    $(this).closest("tr").show();
    $(this).removeClass("hd");
  });
  $("#groups > span").each(function() {
    if ($(this).hasClass(val)) {} else {
      $(this).closest("tr").hide();
      $(this).closest("tr").addClass("hd");
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="hostgroup" data-placeholder="Choose a hostgroup...">
    <option value="delete">delete</option>
    <option value="add">add</option>
    <option value="OS">OS</option>>    
</select>

<tr>
  <td id="groups">
    <span class="add">add,</span>
    <span class="OS">OS,</span>
  </td>
</tr>

<tr>
  <td id="groups">
    <span class="delete">delete,</span>
    <span class="OS">OS,</span>
  </td>
</tr>

例如:我选择删除，它应该只显示没有 <span> 的表行与删除类。但现在它将隐藏所有结果。

Answer 1

$("span.delete").parent().parent().hide()

将使用“删除”类隐藏其中包含跨度的整行。在“更改”事件中将类交换为您选择的值。

编辑:

应该是这样的:

$(".hostgroup").change(function(event) {
var val = $(this).val();
console.log(val);
$("span."+val).parent().parent().hide()
});