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>

我在控制台中没有错误。在投票失败之前，我整晚都在搜索操作方法，我将在此处链接有关此操作的一些链接。

Answer 1

这里有几个问题：

在change元素上使用select事件，而不是click
selectedValue的外部实例在each()中不可用，因为您已在处理程序函数的参数列表中使用它，因此它成为当前元素的索引。这破坏了逻辑。
text()的{{1}}不是整数，可以加上前缀文本.ratePlace进行解析。因此，Rating:的输出始终为parseInt。要解决此问题，您可以将评分值放在其自己的NaN属性中，以消除混乱并需要解析该值
您可以将data的检查放在事件处理程序中，而不是selectedValue中，这样就可以完全避免不必要的循环

您还可以在CSS中使用each类隐藏内容，然后根据需要在jQuery中使用notSelected隐藏/显示元素。话虽如此，试试这个：

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

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

Answer 2

首先，每个函数将返回一个带有两个参数的回调函数，第一个参数为fr index，第二个参数为当前循环元素，因此无需在param中传递所选值，因此它将被index取代；

您可以应用正则表达式来截断实数，然后使用Math.round()来提取实数，然后用点号（。）替换逗号（，）。逗号）

，然后进行比较以显示，或通过添加notSearched类来隐藏您的元素不要忘记在CSS中添加

.notSearched {
  display:none;
}

工作片段下方：仅按开始次数显示，您可以编辑条件（>，<，<=等...）

$("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>

根据评分搜索过滤器

2 个答案: