如何使用jQuery比較每個陣列編號？如果小于輸入范圍編號div標簽將隱藏

我有一個關于 jQuery 陣列的問題。

下面是我的代碼。

我有相同的類 div 標簽，但跨度標簽的值不同。

我使用輸入范圍欄來更改值，如果跨度標記值小于范圍欄值。

對應的 div 標簽將消失。

我可以獲得相同的類陣列編號，但無法比較。

如何修改我的代碼？

$('#myRange').change(function() {
  let Price1 = parseInt($('#myRange').val());

  let Price2 = [];

  $('.price').each(function(index, el) {
    Price2[index] = parseInt(el.innerHTML);
  });

  if (Price2 > Price1) {
    $('.col').fadeOut();
    //console.log('yes');
  } else {
    $('.col').fadeIn();
    //console.log('no');
  }


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="range" min="1" max="50" value="10" step="1" class="slider" id="myRange">


<div class="col">
  <span class="price">10</span>
</div>

<div class="col">
  <span class="price">20</span>
</div>

<div class="col">
  <span class="price">30</span>
</div>

<div class="col">
  <span class="price">40</span>
</div>

<div class="col">
  <span class="price">50</span>
</div>

uj5u.com熱心網友回復：

您需要將用戶選擇的值與每件商品的價格值 ( .col) 進行比較。

這是您的示例的修改版本（特別是 JS 代碼），在用戶執行任何操作（以及一些代碼注釋）之前進行檢查的額外好處。

  // check columns visibility on load
  checkPriceRange(parseInt($('#myRange').val()));

  // event listener for the range slider
  $('#myRange').change(function() {
    // get the user value
    let priceRange = parseInt($('#myRange').val());

    // call the comparison function, and update the UI accordingly
    checkPriceRange(priceRange);
  });

  function checkPriceRange(priceRange) {
    // iterate through every price item
    $('.price').each(function(index, el) {
      // get the parent of the price item, as that's what will be hidden
      let $column = $(this).closest('.col');
      // get the price of the price item
      let price = parseInt(el.innerHTML);
      // compare the price with what the user selected
      if (priceRange >= price) {
        $column.fadeIn();
      } else {
        $column.fadeOut();
      }
    });
  }

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <input type="range" min="1" max="50" value="10" step="1" class="slider" id="myRange">


  <div class="col">
    <span class="price">10</span>
  </div>

  <div class="col">
    <span class="price">20</span>
  </div>

  <div class="col">
    <span class="price">30</span>
  </div>

  <div class="col">
    <span class="price">40</span>
  </div>

  <div class="col">
    <span class="price">50</span>
  </div>

uj5u.com熱心網友回復：

這是一個簡化的作業版本：

$('#myRange').change(function() {
  let Price = parseInt($('#myRange').val());
  $('.price').each(function(index, el) {
    if (parseInt(el.innerText) > Price) {
      $(this).parent().fadeOut();
    } else {
      $(this).parent().fadeIn();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="range" min="1" max="50" value="10" step="1" class="slider" id="myRange">


<div class="col">
  <span class="price">10</span>
</div>

<div class="col">
  <span class="price">20</span>
</div>

<div class="col">
  <span class="price">30</span>
</div>

<div class="col">
  <span class="price">40</span>
</div>

<div class="col">
  <span class="price">50</span>
</div>

標籤：javascript html 查询 数组

上一篇：在Elastic開發工具查詢中使用AND和OR查詢Elastic

下一篇：帶有變數的打字稿型別注釋