Фильтр поиска по рейтингу

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

Прежде всего, каждая функция будет возвращать функцию обратного вызова с двумя параметрами: сначала индексом fr и вторым элементом текущего цикла, поэтому нет необходимости передавать выбранное значение в параметре, поэтому он будет переопределен индексом;

Вы можете применить регулярное выражение для обрезания действительного числа, затем использовать Math.round () , чтобы извлечь действительное число, а затем заменить запятую (,) на точку (.)(js распознает реальное по точке, а не через запятую)

, а затем проведите сравнение, чтобы показать, или скрыть свой элемент, добавив класс notSearched. Не забудьте добавить в css

.notSearched {
  display:none;
}

нижерабочий фрагмент: который показывает только по числу пусков, вы можете редактировать условие (>, <, <= и т. д.) </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>

Answer 2

Здесь есть несколько проблем:

• Используйте событие change для select элементов, а не click
• Внешний экземпляр selectedValue недоступен вeach(), как вы использовали его в списке аргументов функции-обработчика, поэтому вместо этого он становится индексом текущего элемента.Это нарушает логику.
• text() из .ratePlace не является целым числом, которое может быть проанализировано, так как ему предшествует текст Rating:.Следовательно, результат parseInt всегда равен NaN.Чтобы исправить это, вы можете поместить значение рейтинга в свой собственный атрибут data, чтобы избежать путаницы, и вам необходимо проанализировать значение
• . Вы можете поставить проверку selectedValue в обработчике событий, а не each таким образом вы можете полностью избежать цикла, если он не нужен

Вы также можете использовать класс notSelected в CSS, чтобы скрыть содержимое, а затем использовать toggleClass() в jQuery, чтобы скрыть /показать элементы по мере необходимости.С учетом всего сказанного попробуйте следующее:

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

Обратите внимание, что я изменил некоторые рейтинги, чтобы эффект изменения раскрывающегося списка был более очевидным.