У меня есть несколько флажков с динамическим data-price, сгенерированным с использованием PHP. При нажатии на этот флажок я обновляю div, который отображает цену.

Я хочу иметь возможность отображать цену данных с минимальным значением, когда DOM готов, и, конечно, мой флажок с минимальным значением цены начинает проверяться.

Вот мой код:

$(document).ready(function() {
    $(".price").click(function(e) {
        e.preventDefault();
        $("#showPrice").html( $(this).attr('data-price') +' €' );
        
    });
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="price" type="checkbox" data-price="1000">item 1<br>
<input class="price" type="checkbox" data-price="200">item 2<br>
<input class="price" type="checkbox" data-price="6000">item 3<br>
<br><br><br>
<div id="showPrice">0000 €</div>
0
s.zane 2 Май 2019 в 15:52

4 ответа

Лучший ответ

С помощью array.reduce это легко решается

const checkboxes = $('.price').get();

if (checkboxes.length > 0) {
  const min = checkboxes.reduce(function(minCheckbox, checkbox) {
    if ($(checkbox).data('price') < $(minCheckbox).data('price')) {
      return checkbox;
    }
    
    return minCheckbox;
  }, checkboxes[0]);
  
  $(min).attr('checked', 'checked');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="price" type="checkbox" data-price="1000">item 1<br>
<input class="price" type="checkbox" data-price="200">item 2<br>
<input class="price" type="checkbox" data-price="6000">item 3<br>
<br><br><br>
<div id="showPrice">0000 €</div>
0
Miquel Las Heras 2 Май 2019 в 13:12

Итерируйте входные значения и отметьте тот, который имеет наименьшее значение. Не забудьте использовать parseInt () или аналогичную функцию, чтобы убедиться, что вы выполняете числовое сравнение.

РЕДАКТИРОВАТЬ: исправлено, чтобы найти самое низкое значение, где исходный код нашел наибольшее значение.

$(document).ready(function() {
    $(".price").click(function(e) {
        e.preventDefault();
        $("#showPrice").html( $(this).data('price') +' €' );
        
    });
    
    // ensure nothing is checked
    $(".price").prop('checked', false);
    
    // iterate the elements to find the smallest numeric value of data('price')
    var obj, upperVal, minVal, domVal;
    upperVal = 99999999;
    minVal = upperVal;
    $(".price").each( function(){
      domVal = parseInt($(this).data('price'), 10);
      if (domVal < minVal){
        minVal = domVal;
        obj = $(this);
      }
    })
    
    // if minval is < upperVal then we got a hit
    if (minVal < upperVal){
      obj.prop('checked', true);
    }
    

  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="price" type="checkbox" data-price="1000">item 1 (1000)<br>
<input class="price" type="checkbox" data-price="200">item 2 (200)<br>
<input class="price" type="checkbox" data-price="6000">item 3 (6000)<br>
<br><br><br>
<div id="showPrice">0000 €</div>
0
Vanquished Wombat 3 Май 2019 в 09:20
var min = 1000000;
    var minPriceCheckedBox;
    $(document).ready(function() {
       $(".price").each(function() {
        var val = $(this).data("price");
        if (val < min ) {
          min = val;
          minPriceCheckedBox = $(this);
        }
        
       });

       minPriceCheckedBox.prop("checked",true);
       $("#showPrice").html( minPriceCheckedBox.attr('data-price') +' €' );
        $(".price").click(function(e) {
            e.preventDefault();
            $("#showPrice").html( $(this).attr('data-price') +' €' );
            
        });
      });
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <input class="price" type="checkbox" data-price="1000">item 1<br>
      <input class="price" type="checkbox" data-price="200">item 2<br>
      <input class="price" type="checkbox" data-price="6000">item 3<br>
      <br><br><br>
      <div id="showPrice">0000 €</div>
0
IP Flashor Ali 2 Май 2019 в 13:40
$(document).ready(function () {
  $(".price").click(function (e) {
    $('input.price').on('change', function () {
      $('input.price').not(this).prop('checked', false);
    });
    $("#showPrice").html($(this).attr('data-price') + ' €');
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="price" type="checkbox" data-price="1000">item 1<br>
<input class="price" type="checkbox" data-price="200">item 2<br>
<input class="price" type="checkbox" data-price="6000">item 3<br>
<br><br><br>
<div id="showPrice">0000 €</div>
0
Parth Raval 2 Май 2019 в 13:09