基于评级的搜索过滤器

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>

请注意，我更改了一些评分，以使更改下拉菜单的效果更加明显。

Answer 2

首先，每个函数都会返回一个回调函数，有两个参数，第一个是fr index，第二个是当前循环元素，所以不需要在param中传递选择的值，所以它会被index覆盖；

您可以应用正则表达式将实数截断然后使用Math.round()，以便提取实数，然后将逗号（，）替换为点（。）（js通过点而不是逗号识别实数）

然后通过添加notSearched 类来比较显示或隐藏你的元素 不要忘记在css中添加

.notSearched {
  display:none;
}

在工作的 sn-p 下方：仅按开始数显示，您可以编辑条件（>、

$("select").on("click", function() {
  let selectedValue = this.value;
  if (selectedValue == "all") return;
  $('.card-wrap').each(function(index, element) {
    var text = $(element).find(".ratePlace").text();
    let number = text.match(/[0-9]*\,?[0-9]+/g);
    number = number[0].replace(",", ".");
    number = (Math.round(number));
    console.log(number, selectedValue ,   number >= selectedValue )
    number == selectedValue ? $(element).removeClass("notSearched") : $(element).addClass("notSearched");
  })
});

.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;">

      //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: 2,2</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,42</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: 2,1</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>