javascript - JQuery 使用下拉列表搜索元素

Question

我想要做到的是，如果您在下拉列表中选择除“条件”之外的某些内容，它将搜索所有元素并显示它们。

我的jquery:

$('#searchbtn').click(function(){
  var e = document.getElementById("condition");
  var strUser = e.options[e.selectedIndex].value;

  $('.item').each(function(){
    var itemcondition = $('.condition').html();
    if (itemcondition === strUser.toLowerCase()){
      $(this).show();
    }
    if (itemcondition !== strUser.toLowerCase()){
      $(this).hide();
     }
  });

})

我的html:

<select id="condition">
    <option>Condition</option>
    <option value="factory new">Factory New</option>
    <option value="minimal wear">Minimal Wear</option>
    <option value="field tested">Field Tested</option>
    <option value="well worn">Well Worn</option>
    <option value="battle scarred">Battle Scarred</option>
 </select>

这是元素的样子:

<div class="item" data-keywords="m4a4 howl">
  <div class="name">M4A4 Howl</div>
  <div class="condition">Factory New</div>
  <div class="price">800 000 coins</div>
  <button>Buy</button>
</div>

Answer 1

以下是修复该问题的方法。您的 html 属性和 javascript 代码应该更改。您应该为选项值提供产品状况的 ID/slug - 它不应该有空间，因为我们将在下一步中更轻松地管理这些数据。

<select id="condition">
    <option>Condition</option>
    <option value="factory-new">Factory New</option>
    <option value="minimal-wear">Minimal Wear</option>
    <option value="field-tested">Field Tested</option>
    <option value="well-worn">Well Worn</option>
    <option value="battle-scarred">Battle Scarred</option>
 </select>

您的产品列表应该与您选择的选项值相对应，如下所示。

<div class="item factory-new field-tested" data-keywords="m4a4 howl">
  <div class="name">M4A4 Howl</div>
  <div class="condition">Factory New</div>
  <div class="price">800 000 coins</div>
  <button>Buy</button>
</div>

你的 javascript 应该几乎完全改变。更容易理解。

$('#searchbtn').click(function() {
    var $condition = $("#condition");
    var condition = $condition.val();
    $('.item').hide();
    $('.item.' + condition).show();
})

希望有帮助。