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

希望它有所帮助。

JQuery使用下拉列表搜索元素

1 个答案: