Question

更容易看到我的codepen链接：https://codepen.io/ScottFSchmidt/pen/GPWvQP一切正常，但是两个变量的总和并未相加。

尝试失败。我进行了4次重大失败尝试（我也尝试了其他尝试）。我想知道是否需要使用eval。

$total.text(pizzaPrice.innerHTML+sodaPrice.innerHTML);  //returns NAN
$total.text( $sodaTotal + $pizzaTotal);  //returns 6 at ALL times, adding one pizza and one soda. 
$total.text( $sodaTotal.val + $pizzaTotal.val ); //function (e){var t,n,r,i=this[0];{if(arguments.length)return r=g(e),this.each(function(n){var i;1===this.nodeType&
 function sum($pizzaTotal, $sodaTotal) {
    $sodaTotal+$pizzaTotal.html($total);
} //won't trigger with sum() but probably not the easiest way.

` 完整代码： 注释掉的东西是行不通的：

<script text=type/javascript>
  $(document).ready(function(){
var $pizzaOptions = $( '.pizza-options' );
var pizzaPrice    = $pizzaOptions.data( 'price' );
var $sodaOptions  = $( '.soda-options' );
var sodaPrice     = $sodaOptions.data( 'price' );
var $pizzaTotal   = $( '.pizza-total' );
var $sodaTotal    = $( '.soda-total' );
var $total         = $( '.total' );

    $total.text(pizzaPrice+sodaPrice);
   // $total.text( $sodaTotal.val + $pizzaTotal.val );

      function sum($pizzaTotal, $sodaTotal) {
        $sodaTotal+$pizzaTotal.html($total);
    }

  function calculator( $totalEl, price, $options ) {
  return function ( e ) {
    $totalEl.text( price * $options.find( '[type="checkbox"]:checked' ).length );
  };
    //$sum=$sum+$totalEl;
    //$total.text($sum)
    //sum();
 }


  $pizzaOptions.on( 'click', calculator( $pizzaTotal, pizzaPrice, $pizzaOptions ) );
     //$pizzaOptions.on( 'click', sum($pizzaTotal, $sodaTotal);
    //// $pizzaOptions.on( 'click', sum();
      $sodaOptions.on( 'click', calculator( $sodaTotal, sodaPrice, $sodaOptions ) );
  }); //end ready
</script>

几乎所有建议的文章都使用SQL，而不是Jquery。大多数失败的尝试想法都来自建议的文章。提前致谢。

Answer 1

您的sum函数从未被调用过，它也不完全正确。

将总和更改为：

function sum() {
    $total.text(Number($pizzaTotal.text())+Number($sodaTotal.text()));
}

在这里，我们将$ total的文本设置为$ pizzaTotal + $ sodaTotal。使用变量而不是用这种方式会更好。

将计算器更改为：

function calculator( $totalEl, price, $options ) {
    $totalEl.text( price * $options.find( '[type="checkbox"]:checked' ).length );
}

现在，该函数将设置文本，而不仅仅是返回另一个函数。

最后将您的点击侦听器更改为使用匿名函数，同时调用计算器和sum：

$pizzaOptions.on( 'click', function() {
  calculator( $pizzaTotal, pizzaPrice, $pizzaOptions );
  sum();
});

$sodaOptions.on( 'click', function() {
  calculator( $sodaTotal, sodaPrice, $sodaOptions );
  sum();
});

现在它们在执行时也会调用sum。

这是一起https://codepen.io/anon/pen/ZVexyP

Answer 2

codepen.io/ScottFSchmidt/pen/GPWvQP?editors=1010 这是全长解决方案：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="order-form">

  <div class="pizza-options" data-price="5">
    <h2>Pizza</h2>
    <label>
      <input type="checkbox" value="sausage"> Sausage
    </label>
    <label>
      <input type="checkbox" value="pepperoni" data-price=".5"> Pepperoni
    </label>
    <label>
      <input type="checkbox" value="mushrooms"> Mushrooms
    </label>
  </div>

  <div class="soda-options" data-price="2">
    <h2>Soda</h2>
    <label>
      <input type="checkbox" value="coke"> Coke
    </label>
    <label>
      <input type="checkbox" value="pepsi"> Pepsi
    </label>
  </div>

  <div class="totals">
    <p>
      <strong>Pizza Total:</strong> <span class="pizza-total"></span>
    </p>
    <p>
      <strong>Soda Total:</strong> <span class="soda-total"></span>
    </p>
      <p>
      <strong>Sub Total:</strong> <span class="subtotal"></span>
    </p>
  </div>

</form>

Javascript：

var $pizzaOptions = $( '.pizza-options' );
var pizzaPrice    = +$pizzaOptions.data( 'price' );
var $sodaOptions  = $( '.soda-options' );
var sodaPrice     = +$sodaOptions.data( 'price' );
var $pizzaTotal   = $( '.pizza-total' );
var $sodaTotal    = $( '.soda-total' );
var $total = $( '.subtotal' );

function calculator( $totalEl, price, $options ) {
    $totalEl.text( price * $options.find( '[type="checkbox"]:checked' ).length);
}

function sum() {
    $total.text(Number($pizzaTotal.text())+Number($sodaTotal.text()));
}

$pizzaOptions.on( 'click', function() {
  calculator( $pizzaTotal, pizzaPrice, $pizzaOptions );
  sum();
});

$sodaOptions.on( 'click', function() {
  calculator( $sodaTotal, sodaPrice, $sodaOptions );
  sum();
});

使用Jquery无法完全正确地将两个变化的变量相加

2 个答案: