Question

所以我试图让我的变量总数更新点击。我想显示总金额。

我想要23.9 不是10.9523.9

https://jsfiddle.net/jdg2384/qtp2zLma/1/

$( document ).ready(function() {

    var total = 0;
    var arr =[0];
    $( ".card" ).on( "click", function() {

        console.log(arr);

        event.preventDefault();
        var food = $(this).find('h4').text();
        var price = $(this).find('p').text();
        $( "#log" ).prepend(
            `<li class="left"><h4>` + food + `</h4></li>`+
            `<li class="right"><h5 class="right">`+ price +`</h5></li></br>`
        );
        $('h5:first').each(function() {
            total += Number($(this).text());
        });


        $( "#totalCost" ).append(total);

    });

});

Answer 1

你要做的是#totalCost附加你只需要替换html。同样在你的jsfiddle中你也不会从你的p标签中获取数字。

你的javascript应该是这个;

$(document).ready(function() {

  var total = 0;
  var arr = [0];
  $(".card").on("click", function() {

    console.log(arr);

    event.preventDefault();
    var food = $(this).find('h4').text();
    var price = $(this).find('p').text();
    $("#log").prepend(
      `<li class="left"><h4>` + food + `</h4></li>` +
      `<li class="right"><h5 class="right">` + price + `</h5></li></br>`
    );
    $('h5:first').each(function() {
      total += Number($(this).text());
    });
    $('p').each(function() {
      total += Number($(this).text());
    });


    $("#totalCost").html(total);

  });

});

祝你好运

Answer 2

您可以使用解决方案https://jsfiddle.net/qtp2zLma/5/

$(document).ready(function() {

  var total = 0;

  $(".card").on("click", function() {
    event.preventDefault();
    var food = $(this).find('h4').text();
    var price = $(this).find('span.price').find('p').text();
    $("#log").prepend(
      `<li class="left"><h4>${food}</h4></li>` +
      `<li class="right"><h5 class="right">${price}</h5></li></br>`
    );
    
    total += parseFloat(price);

    $("#totalCost").html(total);

  });

});

.cardStyle {
  width: 40%;
  background-color: grey;
  border-radius: 3px;
  float: left;
  padding: 10px;
  margin-bottom: 20px;
  margin-right: 10px;
}

.submitForm {
  height: 726px !important;
  width: 100%;
}

.top {
  margin-top: 5px;
}

hr {
  margin: 5px;
}

h5 {
  text-align: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=" card cardStyle">
  <img src="300x200.png" alt="300">
  <span class="name" value="this"><h4>Winner Winner Chicken</h4></span>
  <span class="price"><p>10.95</p></span>
</div>
<div class="card cardStyle">
  <img src="300x200.png" alt="300">
  <span class="name"><h4>Chicka chick Yeah</h4></span>
  <span class="price"><p>12.95</p></span>
</div>

<h2 id="totalCost"></h2>

id应该是唯一的，而不是id使用class。

希望这会对你有所帮助。

动态改变总数

2 个答案: