Question

您好我正在尝试编写一个代码，允许我为特定字段设置选项，并显示符合单击搜索按钮后已应用的过滤器要求的图像。

到目前为止，这是我的代码：正如您在下面的代码段中看到的那样，我不确定如何向这些图像添加特定类别，然后搜索它们。例如，我将如何添加（冒险，8+的评级和一年的发布到pi的书籍。然后根据需要设置所有选项，然后当我点击搜索时只显示包含相同的书籍放在他们身上的类别。

＆＃13;

  .review-img {
  cursor: pointer;
  height: 160px; // height
  //width: 30%; // width
  }

  #searchfield {
  background-color:red;
  height:150px;
  margin-top:0px;
  text-align: center;

  }

 #main-search-fields {
 padding-top: 66px;
 background-color:red;
 }

 .selects-container {
  display: inline-block;

 }

＆＃13;

    <body>
   <div id ="searchfield">
   <div id="main-search-fields">
   <div class="selects-container">
  <p>Genre:</p>
  <select name="genre">
  <option value="all">All</option>
  <option value="action">Action</option>
  <option value="adventure">Adventure</option>
  <option value="animation">Animation</option>
  <option value="biography">Biography</option>
  <option value="comedy">Comedy</option>
  <option value="crime">Crime</option>
  <option value="documentary">Documentary</option>

  </select>
  </div>
  <div class="selects-container">
  <p>Rating:</p>
  <select name="rating">
  <option value="0">All</option>
  <option value="9">9+</option>
  <option value="8">8+</option>
  <option value="7">7+</option>
  <option value="6">6+</option>
  <option value="5">5+</option>
  <option value="4">4+</option>
  <option value="3">3+</option>
  <option value="2">2+</option>
  <option value="1">1+</option>
  </select>
  </div>
  <div class="selects-container selects-container-last">
  <p>Order By:</p>
  <select name="order_by">
  <option value="latest">Latest</option>
  <option value="oldest">Oldest</option>
  <option value="year">Year</option>
  <option value="rating">Rating</option>
  <option value="likes">Likes</option>
  <option value="alphabetical">Alphabetical</option>
  </select>
  <input type="button" id="search" value="search"  />
  </div>
  </div>
</div>

    <section class='images'>
<img class="review-img" id="lifeofpi" src="https://images-na.ssl-images-amazon.com/images/I/51atapp7YTL._AC_US320_QL65_.jpg" alt="lifeofpi"></img>
<img class="review-img" id="kiterunner" src="https://images-na.ssl-images-amazon.com/images/I/51MtGFNeYjL._AC_US320_QL65_.jpg" alt="kiterunner"></img>    
<img class="review-img" id="starwars" src="https://images-na.ssl-images-amazon.com/images/I/51oqkfvEwZL._AC_US320_QL65_.jpg" alt="starwars"></img>
<img class="review-img" id="twilight" src="https://images-na.ssl-images-amazon.com/images/I/41K99+cInvL._AC_US320_QL65_.jpg" alt="twilight"></img>
</section>

＆＃13;

Answer 1

在jQuery中，您可以使用val方法检索{genre}和{ratings}选项的选定值：

var sSelectedGenre = $('select[name="genre"]').val().toLowerCase(); // lower case the text after getting its selected value
var sSelectedRating = $('select[name="rating"]').val().toLowerCase();

然后，您的每个代码都必须是{genre}和{ratings}（例如data_genre =“action”data_rating =“6”）

<img class="review-img" id="kiterunner" src="https://images-na.ssl-images-amazon.com/images/I/51MtGFNeYjL._AC_US320_QL65_.jpg" alt="kiterunner" data_genre="action" data_rating="6" />

这将作为映射这些条件的“属性键”。在迭代中，您可以循环每个或使用$ .each：https://api.jquery.com/each/

然后检查每个图像的属性是否与基于[options]

中所选值的值匹配

示例：

类型：冒险

评级：+8

$('.review-img').each(function() {
    var sDataGenre = $(this).attr('data_genre'); // image's action attribute
    var sDataRating = $(this).attr('data_rating'); // 6

    if (sDataGenre === sSelectedGenre && sDataRating === sSelectedRating) {
        $(this).show();
    }
});

要获得进一步的指导，这里有一个示例jsfiddle来帮助： http://jsfiddle.net/yctj37yx/（您可以更好地重构此代码）

希望这有助于您的情况。虽然我建议您在服务器端使用搜索过滤器功能来管理数据库（TSQL / SQL）

Answer 2

根据您希望合并的可扩展程度，有不同的方法：

1）对于低级别的可扩展性，您可以手动为每个图像添加HTML5 data-*属性：

data-title="Life of Pi"
data-genre="adventure"
data-published="2001"
data-rating="8"

2）对于更高级别的可伸缩性，您可以创建一系列客户端对象，一个代表每本书

var book = {
    title:"Life of Pi",
    genre:"adventure",
    published: 2001,
    rating: 8
    };

3）为了实现高级别的可伸缩性，您可以构建服务器端数据库并通过MySQL等查询语言对其进行查询。

使用选项在图像上应用过滤器以搜索功能

2 个答案: