javascript - 当 td 类为多个时显示/隐藏选择选项

Question

当我在选择中选择一个选项时，显示一些列，一些隐藏。有些列有几个类。

例如:

"object 7" is in "category 1" and "category 3".

"object 7" is displayed in "category 3" but not in "category 1".

我也想在类别 1 中显示它。

function categories() {
  var sections = document.getElementById("sections").value;

  if (sections == "cat1") {
    $('.cat1').each(function() {
      this.style.display = "table-cell"
    });
  } else {
    $('.cat1').each(function() {
      this.style.display = "none"
    });
  }
  if (sections == "cat2") {
    $('.cat2').each(function() {
      this.style.display = "table-cell"
    });
  } else {
    $('.cat2').each(function() {
      this.style.display = "none"
    });
  }
  if (sections == "cat3") {
    $('.cat3').each(function() {
      this.style.display = "table-cell"
    });
  } else {
    $('.cat3').each(function() {
      this.style.display = "none"
    });
  }
  if (sections == "tous") {
    $('.cat1, .cat2, .cat3').each(function() {
      this.style.display = "table-cell"
    });
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><select class="form-control" id="sections" name="sections" onchange="categories()">
      <option value="choisir" selected disabled>Choisir</option>
      <option id="cat1" value="cat1">categorie 1</option>
      <option id="cat2" value="cat2">categorie 2</option>
      <option id="cat3" value="cat3">categorie 3</option>
      <option id="tous" value="tous">Tous</option>
    </select>
</div>

<table class="table table-striped">
  <thead>
    <tr>
      <th class="cat1">objet 1</th>
      <th class="cat1">objet 2</th>
      <th class="cat2">objet 3</th>
      <th class="cat2">objet 4</th>
      <th class="cat3">objet 5</th>
      <th class="cat3">objet 6</th>
      <th class="cat1 cat3">objet 7</th>
      <th class="cat2 cat3">objet 8</th>
    </thead>
      <tbody class="text-primary">
      <tr>
      <td class="cat1">objet 1</td>
      <td class="cat1">objet 2</td>
      <td class="cat2">objet 3</td>
      <td class="cat2">objet 4</td>
      <td class="cat3">objet 5</td>
      <td class="cat3">objet 6</td>
      <td class="cat1 cat3">objet 7</td>
      <td class="cat2 cat3">objet 8</td>
      </tr>
    </tbody>
  </table>

你能告诉我我的代码有什么问题吗？

Answer 1

您可以通过以下方法简化您的代码:

var sections = document.getElementById("sections").value;
$('table tr td').each(function(){
   $(this).css('display', $(this).hasClass(sections) ? 'block' : 'none');
});

您必须根据条件更改 display 属性。

$(this).hasClass(sections)

hasClass method determines whether any of the matched elements are assigned the given class.

function categories() {
  var sections = document.getElementById("sections").value;
  $('table tr td, table tr th').each(function(){
    $(this).css('display', $(this).hasClass(sections) ? 'inline-block' : 'none');
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><select class="form-control" id="sections" name="sections" onchange="categories()">
      <option value="choisir" selected disabled>Choisir</option>
      <option id="cat1" value="cat1">categorie 1</option>
      <option id="cat2" value="cat2">categorie 2</option>
      <option id="cat3" value="cat3">categorie 3</option>
      <option id="tous" value="tous">Tous</option>
    </select>
</div>

<table class="table table-striped">
  <thead>
    <tr>
      <th class="cat1">objet 1</th>
      <th class="cat1">objet 2</th>
      <th class="cat2">objet 3</th>
      <th class="cat2">objet 4</th>
      <th class="cat3">objet 5</th>
      <th class="cat3">objet 6</th>
      <th class="cat1 cat3">objet 7</th>
      <th class="cat2 cat3">objet 8</th>
    </thead>
      <tbody class="text-primary">
      <tr>
      <td class="cat1">objet 1</td>
      <td class="cat1">objet 2</td>
      <td class="cat2">objet 3</td>
      <td class="cat2">objet 4</td>
      <td class="cat3">objet 5</td>
      <td class="cat3">objet 6</td>
      <td class="cat1 cat3">objet 7</td>
      <td class="cat2 cat3">objet 8</td>
      </tr>
    </tbody>
  </table>