在Javascript中根据条件添加变量值答案

【问题标题】：Adding to variable value on condition in Javascript在Javascript中根据条件添加变量值
【发布时间】：2015-03-23 07:27:56
【问题描述】：

我有一个名为“total”的变量，我想为其分配一个数字（或价格），然后在选择或选中某些选项时添加到该数字。这是我到目前为止的代码。

这是设置将要添加到的变量的初始值（基本价格）的代码。此代码当前有效。

$('input[name=trimlevel]').change(function(){

      var total = 0;

      if(document.getElementById('basetrim').checked==true) {

              var total = 0;
              var basetrim = 3550.00;
              total = total + basetrim;
              $('#myTotal').html('$' + total);

      }else if(document.getElementById('upgrade').checked==true) {
                  var total = 0; 
              var upgrade = 2400.00;
              total = total + upgrade;
              $('#myTotal').html('$' + total);


       }else {
             $('#myTotal').html('$' + total);
           }


    });

以下是用于“添加”变量值的代码示例。这不起作用。

$('input[name=leather]').change(function(){

      if(document.getElementById('leather).checked == true) {
             var leather = 180.00;
             total = total + leather;
             $('#myTotal').html('$' + total);
      }
});

这里是 HTML 供参考

<div class="modelsel">
           <h2>1. SELECT MODEL</h2> <br>
           <label for="basetrim">BASE MODEL</label> 
           <input id="basetrim" type="radio" name="trimlevel" value="2400.00">
           <label for="upgrade">UPGRADED MODEL</label> 
           <input id="upgrade" type="radio" name="trimlevel" value="3550.00">

 </div>

<div class="inside">
          <h2>3. BASE MODEL ADD-ONS</h2><br>
          <input type="checkbox" value="180.00" id="leather" name="leather" />
           <label for="leather">Leather Seat (+ $180.00)</label><br>
</div>

<div id="myTotal"></div>

我对 Javascript 比较陌生，并且已经为此苦苦挣扎了好几个小时。任何帮助表示赞赏。提前致谢。

【问题讨论】：

看看你上面代码的颜色，语法高亮显示你有语法错误，你缺少引号
此时变量total 不再存在，因此您无法添加。您需要使其全球化。
嗨@Juhana！正如 Juhana 所说，第二个事件函数中不存在总计。您必须在这两个函数之外存储价格信息。您还可以考虑使用 .data() jQuery 函数。

标签： javascript jquery variables if-statement conditional

【解决方案1】：

解决方案已在 cmets 中。函数的上下文是不同的。您可以在函数之外定义总计，也可以为您的行为使用对象。

var someObject = {};

在您的函数中，您可以使用点符号来编写。

someObject.total = 10;

【讨论】：

【解决方案2】：

$('input[name=trimlevel]').change(function(){
  var total = 0;
  if($(this).checked==true)) {
    total = total + $(this).val();
  }
  $('#myTotal').html('$' + total);
});

【讨论】：

【解决方案3】：

只需进行一些修改即可使事情正常工作：

第一个，这里有一个错字：

if(document.getElementById('leather).checked == true) {

你错过了一个 ' 所以替换它：

if(document.getElementById('leather').checked == true) {

其次，从函数中定义 var total 并使其可供所有函数使用。如果你的方法在 ready 函数中，你可以在那里定义 total 。还要删除函数内部的total定义，否则您将不会使用ready中定义的那个。

第三，当用户点击复选框时，你总是在增加价值（不知道这是否是你想要的）。在这个fiddle中，我根据复选框的状态来增加或减少总数。

【讨论】：

感谢您的帮助。它现在完美运行！看到它是如此简单的事情有点令人沮丧。谢谢！
@BrandonC 很乐意提供帮助 :) 有时最简单的事情是最困难的，如果适合，请接受

【解决方案4】：

考虑编写一个全面的命名函数，将所有可能对你的总数有所贡献的东西加起来：

function calculate() {
    var total = 0;

    if(document.getElementById('basetrim').checked) {
        total = total + 3550.00;
    } else if(document.getElementById('upgrade').checked) {
        total = total + 2400.00;
    }

    if(document.getElementById('leather').checked) {
        total = total + 180.00;
    }

    // further additions here 
    // further additions here 
    // further additions here 

    $('#myTotal').html('$' + total);
});

然后在必要时将该命名函数附加为事件处理程序：

$('input[name=trimlevel]').change(calculate);
$('input[name=leather]').change(calculate);
//further attachments of calculate as event handler here
//further attachments of calculate as event handler here
//further attachments of calculate as event handler here

【讨论】：