Question

当我运行相同的代码而没有图像时（例如在li上输入一些文本）会给我结果，但是当我放置图像时。这是行不通的。这里有任何建议-`

我在这里尝试使用列表，但是在实际项目中，我有一个表，该表包含3行，并按3种不同的类名分类，每行4张图像。如何只提取选定的元素组

$("button").click(function(){
  //remove selected class from all buttons
  $("button").removeClass("selected");

  //add selected class only to clicked button
  $(this).addClass("selected");

  //get data type filter
  var dataFilter = $(this).data('filter');

  //if data filter is all show all of them
  if(dataFilter == "all") {
      $(".elements li").show();
  }
  else
  {
    //else hide all of them and show only the one with correct data filter
    $(".elements li").hide();
    $("." + dataFilter).show();
  }
});

li{
  display: inline;
  list-style: none;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="filters">
  <button class="selected" data-filter="all">Show All</button>
  <button data-filter="type-one">Show One</button>
  <button data-filter="type-two">Show Two</button>
</div>
<tr class="people">
  <td><img src="./thumbs/anil_tn.jpg" alt="anil1" class="gallery_image"></td>
  <td><img src="./thumbs/kapri_tn.jpg" alt="anil2" class="gallery_image"></td>
  <td><img src="./thumbs/me.jpg" alt="anil3" class="gallery_image"></td>
  <td><img src="./thumbs/pandey_tn.jpg" alt="anil4" class="gallery_image"></td>
</tr>

<tr class="nature">
  <td><img src="./thumbs/best_tn.jpg" alt="anil5" class="gallery_image"></td>
  <td><img src="./thumbs/ny_tn.jpg" alt="anil6" class="gallery_image"></td>
  <td><img src="./images/talo.jpg" alt="anil7" class="gallery_image"></td>
  <td><img src="./images/turku.jpg" alt="anil8" class="gallery_image"></td>
</tr>

？

Answer 1

像这样？对于people或nature的按钮过滤器，然后表格是.elements，每行是应过滤的class。

$("button").click(function(){
  $("button").removeClass("selected");

  $(this).addClass("selected");

  var dataFilter = $(this).data('filter');

  if(dataFilter == "all") {
      $(".elements tr").show();
  }
  else
  {
    $(".elements tr").hide();
    $("." + dataFilter).show();
  }
});

li{
  display: inline;
  list-style: none;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="filters">
  <button class="selected" data-filter="all">Show All</button>
  <button data-filter="people">Show One</button>
  <button data-filter="nature">Show Two</button>
</div>
<table class="elements">
  <tr class="people">
    <td><img src="./thumbs/anil_tn.jpg" alt="anil1" class="gallery_image"></td>
    <td><img src="./thumbs/kapri_tn.jpg" alt="anil2" class="gallery_image"></td>
    <td><img src="./thumbs/me.jpg" alt="anil3" class="gallery_image"></td>
    <td><img src="./thumbs/pandey_tn.jpg" alt="anil4" class="gallery_image"></td>
  </tr>

  <tr class="nature">
    <td><img src="./thumbs/best_tn.jpg" alt="anil5" class="gallery_image"></td>
    <td><img src="./thumbs/ny_tn.jpg" alt="anil6" class="gallery_image"></td>
    <td><img src="./images/talo.jpg" alt="anil7" class="gallery_image"></td>
    <td><img src="./images/turku.jpg" alt="anil8" class="gallery_image"></td>
  </tr>
</table>

使用jQuery过滤<img/>元素

1 个答案: