输入值动态更改 div 的内容 [关闭]答案

【问题标题】：value of input changes div's content dynamically [closed]输入值动态更改 div 的内容 [关闭]
【发布时间】：2023-03-22 04:36:01
【问题描述】：

我对 javascript 有点陌生。我想动态地将总值乘以天数。尝试了一段时间，但找不到解决方案。提前致谢。

$(document).ready(function() {

  $('.kalorie').click(function() {

    var varKalorie = $('input[name=kalorie]:checked').val()
    $('.posilki').prop("disabled", false);

    if (varKalorie == 1000) {

      $('.posilki').click(function() {
        var total = 0;

        $('.posilki:checked').each(function() {
          var posilkiChecked = $('.posilki:checked').length;
          if (posilkiChecked >= 3) {
            posilkiEach = parseFloat($(this).val());
            total += posilkiEach;
            $('.qtyminus').prop("disabled", false);
            $('.qtyplus').prop("disabled", false);
          } else {
            total = "Musisz zaznaczyc przynajmniej 3 dania";
          }
        });

        $('#total').html(total);

      });
    }

    if (varKalorie == 1250) {

      $('.posilki').click(function() {
        var total = 0;

        $('.posilki:checked').each(function() {
          var posilkiChecked = $('.posilki:checked').length;
          if (posilkiChecked >= 3) {
            posilkiEach = parseFloat($(this).val()) * 1.1;
            total += posilkiEach;
            $('.qtyminus').prop("disabled", false);
            $('.qtyplus').prop("disabled", false);
          } else {
            total = "Musisz zaznaczyc przynajmniej 3 dania";
          }
        });

        $('#total').html(total + 'pln');

      });
    }

    if (varKalorie == 1500) {

      $('.posilki').click(function() {
        var total = 0;

        $('.posilki:checked').each(function() {
          var posilkiChecked = $('.posilki:checked').length;
          if (posilkiChecked >= 3) {
            posilkiEach = parseFloat($(this).val()) * 1.2;
            total += posilkiEach;
            $('.qtyminus').prop("disabled", false);
            $('.qtyplus').prop("disabled", false);
          } else {
            total = "Musisz zaznaczyc przynajmniej 3 dania";
          }
        });

        $('#total').html(total + 'pln');

      });
    }

    if (varKalorie == 2000) {

      $('.posilki').click(function() {
        var total = 0;

        $('.posilki:checked').each(function() {
          var posilkiChecked = $('.posilki:checked').length;
          if (posilkiChecked >= 3) {
            posilkiEach = parseFloat($(this).val()) * 1.4;
            total += posilkiEach;
            $('.qtyminus').prop("disabled", false);
            $('.qtyplus').prop("disabled", false);
          } else {
            total = "Musisz zaznaczyc przynajmniej 3 dania";
          }
        });

        $('#total').html(total + 'pln');

      });
    }

    if (varKalorie == 2500) {

      $('.posilki').click(function() {
        var total = 0;

        $('.posilki:checked').each(function() {
          var posilkiChecked = $('.posilki:checked').length;
          if (posilkiChecked >= 3) {
            posilkiEach = parseFloat($(this).val()) * 1.6;
            total += posilkiEach;
            $('.qtyminus').prop("disabled", false);
            $('.qtyplus').prop("disabled", false);
          } else {
            total = "Musisz zaznaczyc przynajmniej 3 dania";
          }
        });

        $('#total').html(total + 'pln');

      });
    }
  });

  console.log($('#total').text());

  // This button will increment the value
  $('.qtyplus').click(function(e) {
    // Stop acting like a button
    e.preventDefault();
    // Get the field name
    fieldName = $(this).attr('field');
    // Get its current value
    var currentVal = parseInt($('input[name=' + fieldName + ']').val());
    // If is not undefined
    if (!isNaN(currentVal)) {
      // Increment
      $('input[name=' + fieldName + ']').val(currentVal + 1);
    } else {
      // Otherwise put a 0 there
      $('input[name=' + fieldName + ']').val(0);
    }
  });
  // This button will decrement the value till 0
  $(".qtyminus").click(function(e) {
    // Stop acting like a button
    e.preventDefault();
    // Get the field name
    fieldName = $(this).attr('field');
    // Get its current value
    var currentVal = parseInt($('input[name=' + fieldName + ']').val());
    // If it isn't undefined or its greater than 0
    if (!isNaN(currentVal) && currentVal > 0) {
      // Decrement one
      $('input[name=' + fieldName + ']').val(currentVal - 1);
    } else {
      // Otherwise put a 0 there
      $('input[name=' + fieldName + ']').val(0);
    }
  });

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <h2 class="global-title">Cennik</h2>
  <input type="radio" name="kalorie" class="kalorie" value="1000" />1000
  <input type="radio" name="kalorie" class="kalorie" value="1250" />1250
  <input type="radio" name="kalorie" class="kalorie" value="1500" />1500
  <input type="radio" name="kalorie" class="kalorie" value="2000" />2000
  <input type="radio" name="kalorie" class="kalorie" value="2500" />2500
  <br/>
  <br/>

  <input type="checkbox" class="posilki" value="15" disabled/>Śniadanie
  <input type="checkbox" class="posilki" value="10" disabled/>2 Śniadanie
  <input type="checkbox" class="posilki" value="20" disabled/>obiad
  <input type="checkbox" class="posilki" value="10" disabled/>podwieczorek
  <input type="checkbox" class="posilki" value="15" disabled/>kolacja
  <br/>Days

  <input type='button' value='-' class='qtyminus' field='quantity' disabled/>
  <input type='text' name='quantity' value='30' class='qty' id="days-input" disabled/>
  <input type='button' value='+' class='qtyplus' field='quantity' disabled/>

  <br/>
  <br/>Total:
  <div id="total">0 zł</div>
</div>

【问题讨论】：

请包含一个与您的问题相关的代码的最小示例，并在问题中包含相关代码。看起来你要求一个简单的任务，如果是这样，就不需要一个复杂的例子。另外，我鼓励您提供英语示例，因为我不知道您的小提琴在做什么。
对不起。我对jsfiddle进行了更改=jsfiddle.net/7ejvvk86/8主要任务是你选择卡路里然后选择一些饭菜（每顿饭都有特价）并计算价格。然后它应该乘以正负变化的天数。希望能解释。感谢您的回复。
zl，那是波兰兹罗提，对吧？ ...无论如何，我不完全了解卡路里与方程式的关系。您似乎没有以任何有意义的方式使用该结果（嗯，是的，我看到一些因素发生了变化：1、1.2、1.4，...在您的第一个 jsFiffle 中）。我猜你应该在计算最终结果的函数中使用该值。你能给出你的应用程序的基本数学方程吗？
@EmmanuelDelay 看这里 jsfiddle.net/7ejvvk86/8 我删除了所有不必要的代码部分。在我的应用程序中，用户应该能够选择为数不多的卡路里之一（1000、1250 ...）然后能够选择餐点（至少 3 个，每个都有价格 - 15、10、20 ..）1000 是开始，每增加 250 卡路里的热量 - 每顿饭都贵 10%。最后是你想订购多少天。如果超过 30 天，则应享受全价 20% 的折扣。它是如何解释的。感谢您的回复。

标签： javascript jquery input

【解决方案1】：

既然你提到对 javascript 来说是一种新事物......我的主要信息是把东西放在函数中。

这迫使您思考：“好吧，我到底需要知道什么才能执行此操作？” ...嗯，这些是你的函数的参数。

当然，函数大大减少了代码，您不必复制/粘贴所有内容 6 次。

注意：如果需要，您可以将所有函数放入 document.ready 中。

而且，哦，是的，我添加了标签元素。这对客户来说更好。

是这个吗？

<div class="container">
  <h2 class="global-title">Cennik</h2>

  <input type="radio" name="kalorie" class="kalorie" value="1000" id="r0" /><label for="r0">1000</label>
  <input type="radio" name="kalorie" class="kalorie" value="1250" id="r1" /><label for="r1">1250</label>
  <input type="radio" name="kalorie" class="kalorie" value="1500" id="r2" /><label for="r2">1500</label>
  <input type="radio" name="kalorie" class="kalorie" value="2000" id="r3" /><label for="r3">2000</label>
  <input type="radio" name="kalorie" class="kalorie" value="2500" id="r4" /><label for="r4">2500</label>
  <br/><br/>

  <input type="checkbox" class="posilki" id="sniadanie" value="15" ><label for="sniadanie">Sniadanie</label>
  <input type="checkbox" class="posilki" id="sniadanie2" value="10" ><label for="sniadanie2">2 Sniadanie</label>
  <input type="checkbox" class="posilki" id="obiad" value="20" ><label for="obiad">obiad</label>
  <input type="checkbox" class="posilki" id="podwieczorek" value="10" ><label for="podwieczorek">podwieczorek</label>
  <input type="checkbox" class="posilki" id="kolacja" value="15" ><label for="kolacja">kolacja</label>
  <br/><br/>Days

  <input type="button" value="-" class="qtyminus" field="quantity" >
  <input type="text" name="quantity" value="30" class="qty" id="days-input" >
  <input type="button" value="+" class="qtyplus" field="quantity" >

  <br/>
  <br/>Total:
  <div id="total">0 zl</div>
</div>
<style>
label {
  cursor: pointer;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>

// calculates the total price, displays it in id="total"
function calculateTotal(sum_price, days) {
  var result = sum_price * days;
  $('#total').html(result + ' zl');
  return result; // not really being used
}

// reads the checked checkboxes, returns their sum value
function readSumPrice() {
  var sum = 0;
  $('.posilki').each(function(i) {
    if(this.checked) {
      sum += Number($(this).val());
    }
  });
  return sum;  
}

// what ever the client changes, triggers this function.  We don't really care what has just been clicked on, we have to recalculate it anyway.
function somethingChanged() {
  // first we want to check if three meals have been chosen
  var numberOfMealsChosen = $( ".posilki:checked" ).length;
  if(numberOfMealsChosen >= 3) {
    // now we calculate
    var sum_price = readSumPrice();
    var days = Number($('#days-input').val());
    calculateTotal(sum_price, days);
  }
  else {
    $('#total').html('please choose 3 items');
  }
}

// now the events
$(document).ready(function() {
  // click on +
  $('.qtyplus').click(function() {
    var days = Number($('#days-input').val());
    $('#days-input').val(days + 1);
    somethingChanged();
  });

  // click on -
  $('.qtyminus').click(function() {
    var days = Number($('#days-input').val());
    // let's put 0 as minimum
    if(days > 0) {
      $('#days-input').val(days - 1);
      somethingChanged();
    }
  });

  // click on checkbox
  $('.posilki').click(function() {
    somethingChanged();
  });

  // click on radio.  triggers the calculation but doesn't really affect anything (yet?)
  $('.kalorie').click(function() {
    somethingChanged();
  });

});

</script>

【讨论】：

是的，这正是我想要的。感谢您的回复以及对我来说最重要的解释/cmets。真的很感激。
好的，很高兴为您提供帮助。