javascript - 基于评级的搜索过滤器

Question

我尝试根据排名(存储在字符串中的数值)构建一个小过滤器，但我被部分代码困住了。

预期行为

当用户点击 select 选项时，与所选值不匹配的元素必须隐藏(而不是删除)。

$(".notSearched").hide();

$("select").on("click", function() {
  let selectedValue = this.value;
  $('.card-wrap').each(function(selectedValue) {
    console.log("sei qua");

    if (selectedValue === "0") {
      return
    }
    let rate = $(".restoName").find(".ratePlace").text();
    let numRate = parseInt(rate);
    if (rate !== selectedValue || rate !== (selectedValue + 0.5)) {
      $(this).addClass("notSearched");
    }
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="columnsContainer">
  <div class="leftColumn">
    <div class="filterResearch">
      <select name="filter" id="searchFilter">
        <option value="all">Apply a filter</option>
        <option value="1">1 Star</option>
        <option value="2">2 Stars</option>
        <option value="3">3 Stars</option>
        <option value="4">4 Stars</option>
        <option value="5">5 Stars</option>
      </select>
    </div>
    <div id="map"></div>

    <div class="rightColumn" style="margin-top:50px;">

      //Cards down below
      <div class="card-grid">
        <div class="card-wrap" id="">
          <img src="https://image.ibb.co/k4SSPK/Spinaci_Green_Dark_Blue.jpg " class="photo">
          <div class="restoName">
            <h3>Restaurant Name Here</h3>
            <p class="restoAddress">In questo posto ci andrà l'indirizzo del ristorante in questione, sarà una stringa lunga</p>
            <p class="ratePlace">Rating: 4,5</p>
          </div>
        </div>
        <div class="card-wrap" id=""><img src=" https://image.ibb.co/k4SSPK/Spinaci_Green_Dark_Blue.jpg" class="photo">
          <div class="restoName">
            <h3>Restaurant Name Here2</h3>
            <p class="restoAddress">In questo posto ci andrà l'indirizzo del ristorante in questione, sarà una stringa lunga222</p>
            <p class="ratePlace">Rating: 4,52</p>
          </div>
        </div>
        <div class="card-wrap" id=""><img src=" https://image.ibb.co/k4SSPK/Spinaci_Green_Dark_Blue.jpg" class="photo">
          <div class="restoName">
            <h3>Restaurant Name Here3</h3>
            <p class="restoAddress">In questo posto ci andrà l'indirizzo del ristorante in questione, sarà una stringa lunga333</p>
            <p class="ratePlace">Rating: 4,53</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

我在控制台中没有错误。在投票之前，我整晚都在搜索该怎么做，我将在此处链接一些相关链接。

1. https://codepen.io/jsartisan/pen/wKORYL
2. https://www.w3schools.com/howto/howto_js_filter_lists.asp
3. https://codepen.io/samyerkes/pen/Inaht

Answer 1

这里有几个问题:

• 在 select 元素上使用 change 事件，而不是 click
• selectedValue 的外部实例在 each() 中不可用，因为您在处理函数的参数列表中使用了它，因此它成为索引代替当前元素。这打破了逻辑。
• .ratePlace 的text() 不是可以解析的整数，因为它以文本Rating: 为前缀。因此 parseInt 的输出总是 NaN。要解决此问题，您可以将评级值放入其自己的 data 属性中以停止混淆并需要解析该值
• 您可以将 selectedValue 的检查放在事件处理程序中，而不是 each，这样您就可以在不需要时完全避免循环

您也可以使用CSS中的notSelected类来隐藏内容，然后使用jQuery中的toggleClass()来根据需要隐藏/显示元素。尽管如此，试试这个:

$("select").on("change", function() {
  let selectedValue = parseInt(this.value, 10) || 0;
  if (selectedValue === 0)
    return;

  $('.card-wrap').each(function() {
    let $cardWrap = $(this);
    let rate = $cardWrap.find(".ratePlace").data('rating');
    $cardWrap.toggleClass('notSearched', rate < selectedValue);
  })
});

.notSearched {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="columnsContainer">
  <div class="leftColumn">
    <div class="filterResearch">
      <select name="filter" id="searchFilter">
        <option value="all">Apply a filter</option>
        <option value="1">1 Star</option>
        <option value="2">2 Stars</option>
        <option value="3">3 Stars</option>
        <option value="4">4 Stars</option>
        <option value="5">5 Stars</option>
      </select>
    </div>
    <div id="map"></div>
    <div class="rightColumn" style="margin-top:50px;">
      <div class="card-grid">
        <div class="card-wrap">
          <img src="https://image.ibb.co/k4SSPK/Spinaci_Green_Dark_Blue.jpg " class="photo">
          <div class="restoName">
            <h3>Restaurant Name Here</h3>
            <p class="restoAddress">In questo posto ci andrà l'indirizzo del ristorante in questione, sarà una stringa lunga</p>
            <p class="ratePlace" data-rating="1.5">Rating: 1,5</p>
          </div>
        </div>
        <div class="card-wrap">
          <img src=" https://image.ibb.co/k4SSPK/Spinaci_Green_Dark_Blue.jpg" class="photo">
          <div class="restoName">
            <h3>Restaurant Name Here2</h3>
            <p class="restoAddress">In questo posto ci andrà l'indirizzo del ristorante in questione, sarà una stringa lunga222</p>
            <p class="ratePlace" data-rating="3.52">Rating: 3,52</p>
          </div>
        </div>
        <div class="card-wrap">
          <img src=" https://image.ibb.co/k4SSPK/Spinaci_Green_Dark_Blue.jpg" class="photo">
          <div class="restoName">
            <h3>Restaurant Name Here3</h3>
            <p class="restoAddress">In questo posto ci andrà l'indirizzo del ristorante in questione, sarà una stringa lunga333</p>
            <p class="ratePlace" data-rating="4.53">Rating: 4,53</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

请注意，我更改了一些评级以使更改下拉列表的效果更加明显。