与使用 jquery 过滤图像有关的问题答案

【问题标题】：problem related to filtering images with jquery与使用 jquery 过滤图像有关的问题
【发布时间】：2020-08-01 16:25:46
【问题描述】：

我正在使用 jquery 进行简单的过滤图像项目我有一个名为“data-genre”的数据属性，其中包含多个值

例如：data-genre = “科幻、警察、神秘、心理”

当我的数据流派具有像 data-genre = "action" 这样的单一值时，我能够过滤包含动作流派的图像（通过在选择框中选择动作流派）但是你知道动画可以有多种类型，所以当我像上面的例子一样添加多个值时，它什么都没有显示我想要我的 jquery 代码，这样当我在选择框中选择警察类型时，它应该循环遍历这些数据的多个值-流派并显示具有警察流派的图像

这是我的源代码

HTML 代码：


<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


<title>Anime Filter</title>
<style>
*{
margin: 0 auto;
padding: 0 auto
box-sizing: border-box;
}

.an-filterbar{
text-align: center;
margin: 50px;
}

.ps-page{
margin: 100px;
}

.ps-page .ps-links{
margin-left: 30px;
float: left;
text-align: center;
}

</style>
</head>
<body>
<div class="an-filterbar">
    <label for="an-search"><b>Type :</b></label>
      <select class="type">
        <option value="all">All</option>
        <option value="tvseries">Tv series</option>
        <option value="movie">Movie</option>
      </select>
        <br>
    <label for="an-search"><b>Genre :</b></label>
      <select class="genre">
        <option value="all">All</option>
        <option value="action">Action</option>
        <option value="adventure">Adventure</option>
        <option value="cars">Cars</option>
        <option value="comedy">Comedy</option>
        <option value="police">Police</option>
      </select>
      <br>
     <label for="an-search"><b>Year :</b></label>
      <select class="year">
        <option value="all">All</option>
        <option value="1990">1990</option>
        <option value="1991">1991</option>
        <option value="1992">1992</option>
        <option value="1993">1993</option>
        <option value="1994">1994</option>
      </select>
      <br>
     <label for="an-search"><b>Season :</b></label>
      <select class="season">
        <option value="all">All</option>
        <option value="winter">Winter</option>
        <option value="spring">Spring</option>
        <option value="summer">Summer</option>
        <option value="fall">Fall</option>
      </select>
      <br>
    <label for="an-search"><b>Status :</b></label>
      <select class="status">
        <option value="all">All</option>
        <option value="airing">Airing</option>
        <option value="finished">Finished</option>
        <option value="notyetaired">Not yet Aired</option>
      </select>
      <br>
</div>

<div class="ps-page">
<div class="ps-links" data-type="movie" data-genre="adventure, comedy, action" data-year="1990" data-season="summer" data-status="notyetaired">
  <a href="">
  <figure>
  <img src="assets/pimg-6.jpg" alt="Eizouken ni wa te wo dasu na">
  <figcaption>
  <b>Rating : N/R</b><br>
  Eizouken ni wa te wo dasu na
  </figcaption>
  </figure>
  </a>
  </div>
  <div class="ps-links" data-type="tvseries" data-genre="adventure, cars" data-year="1991" data-season="fall" data-status="airing">
  <a href="">
  <figure>
  <img src="assets/pimg-7.jpg" alt="Somali to mori no kamisama">
  <figcaption>
  <b>Rating : N/R</b><br>
  Somali to mori no kamisama
  </figcaption>
  </figure>
  </a>
  </div>
  <div class="ps-links" data-type="tvseries" data-genre="action, comedy, cars" data-year="1992" data-season="summer" data-status="finished">
  <a href="">
  <figure>
  <img src="assets/pimg-8.jpg" alt="Jibaku shounen hanako-kun">
  <figcaption>
  <b>Rating : N/R</b><br>
  Jibaku shounen hanako-kun
  </figcaption>
  </figure>
  </a>
  </div>
  <div class="ps-links" data-type="movie" data-genre="sci-fi, police, mystery, psychological" data-year="1993" data-season="spring" data-status="finished">
  <a href="">
  <figure>
  <img src="assets/pimg-9.jpg" alt="Plunderer">
  <figcaption>
  <b>Rating : N/R</b><br>
  Plunderer
  </figcaption>
  </figure>
  </a>
  </div>
  </div>
<script>
$("select.type, select.genre, select.year, select.season, select.status").change(updateCategories);

function updateCategories() {
  //get all the values
  var caType = $('select.type').val();
  var caGenre = $('select.genre').val();
  var caYear = $('select.year').val();
  var caSeason = $('select.season').val();
  var caStatus = $('select.status').val();

  $('.ps-page')
    .find('.ps-links')
    .hide()
    .filter(function () {
      var okcaType = true;
      if(caType !== "all"){
        okcaType = $(this).attr('data-type') === caType;
      }

      var okcaGenre = true;
      if(caGenre !== "all"){
        okcaGenre = $(this).attr('data-genre') === caGenre;
      }

      var okcaYear = true;
      if(caYear !== "all"){
        okcaYear = $(this).filter('data-year') === caYear;
      }

      var okcaSeason = true;
      if(caSeason !== "all"){
        okcaSeason = $(this).attr('data-season') === caSeason;
      }

      var okcaStatus = true;
      if(caStatus !== "all"){
        okcaStatus = $(this).attr('data-status') === caStatus;
      }

      //only fade a image if it satisfies all five conditions
      return okcaType && okcaGenre && okcaYear && okcaSeason && okcaStatus;
  }).fadeIn('fast');
}
</script>
</body>
</html>

尝试此代码并在选择框中选择一种类型，它不会显示任何图像

我希望解决方案适合我的代码（无需更改整个代码）并解释其工作原理。

【问题讨论】：

代码中没有
是的，我没有添加选择标签，因为它的列表太大
我希望流派选择标签有助于回答我的问题
你能把它放在某个地方，因为我想查看整个代码吗？如果可能的话。同样在您的实际代码中，所有 5 个选择标签，对吧？

标签： javascript jquery html css filtering

【解决方案1】：

您需要将 data-genre 属性拆分为一个数组，并检查该数组中是否存在所选的流派。

if (caGenre !== "all") {
                    var genreArray = $(this).attr('data-genre').split(",").map(function (item) { return item.trim(); })
                    okcaGenre = genreArray.indexOf(caGenre) !== -1;
                }

如您所见，我已将 data-genre 字符串拆分为一个数组，并删除了每个项目的周围空格。

更新代码：

function updateCategories() {
        //get all the values
        var caType = $('select.type').val() || 'all';
        var caGenre = $('select.genre').val() || 'all';
        var caYear = $('select.year').val() || 'all';
        var caSeason = $('select.season').val() || 'all';
        var caStatus = $('select.status').val() || 'all';


        $('.ps-page')
            .find('.ps-links')
            .hide()
            .filter(function () {
                var okcaType = true;
                if (caType !== "all") {
                    okcaType = $(this).attr('data-type') === caType;
                }

                var okcaGenre = true;
                if (caGenre !== "all") {
                    var genreArray = $(this).attr('data-genre').split(",").map(function (item) { return item.trim(); })
                    okcaGenre = genreArray.indexOf(caGenre) !== -1;
                }

                var okcaYear = true;
                if (caYear !== "all") {
                    okcaYear = $(this).filter('data-year') === caYear;
                }

                var okcaSeason = true;
                if (caSeason !== "all") {
                    okcaSeason = $(this).attr('data-season') === caSeason;
                }

                var okcaStatus = true;
                if (caStatus !== "all") {
                    okcaStatus = $(this).attr('data-status') === caStatus;
                }

                //only fade a image if it satisfies all five conditions
                return okcaType && okcaGenre && okcaYear && okcaSeason && okcaStatus;
            }).fadeIn('fast');
    }

【讨论】：

我刚刚对您在第一个代码框（三行代码）中规定的我的类型 jquery 代码进行了更改，它成功了。但是当我尝试复制整个更新的代码时，它根本没有显示任何更改可能是因为在变量末尾添加了“all”值
由于您没有在代码中添加其他选择元素，因此我添加了“全部”以避免错误。不客气。