Question

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

例如：

＆＃34;对象7＆＃34;属于＆＃34;类别1＆＃34;和＆＃34;类别3＆＃34;。

＆＃34;对象7＆＃34;显示在＆＃34;类别3＆＃34;但不属于＆＃34;类别1＆＃34;。

我想在第1类中显示它。

＆＃13;

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

＆＃13;

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

＆＃13;

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

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方法确定是否有任何匹配的元素分配给定的班级。

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>

Answer 2

首先，最好使用jQuery附加change事件。

$('#sections').on('change', function(){
    //Your event core here
});

从您onclick移除内联select：

<select class="form-control" id="sections" name="sections">

您可以在每次更改后隐藏所有td和th，然后按类名显示元素，如：

$('.'+class_name).show();

希望这会对你有所帮助。

＆＃13;

$('#sections').on('change', function(){
   var class_name = $(this).val();
   
   $('td,th').hide();
   $('.'+class_name).show();
})

＆＃13;

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

＆＃13;

Answer 3

我刚刚对你的脚本做了一点改动。首先隐藏所有类，然后显示每个类..

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

        // hide all first and then show
          $('.cat1, .cat2, .cat3').each(function() {
            this.style.display = "none";
          });            



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


      }

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

3 个答案: