javascript - 根据 var 值显示文本

Question

我需要这个交互元素，用户可以在其中切换各种按钮。一些按钮的值为 4，而另一些按钮的值为 1 和 0。当切换按钮加起来时，即。 8、会显示一段文字。如果是 4，将显示另一个文本，依此类推。

任何人都可以帮助我使用下面的代码，因为我似乎无法让它工作。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.selected {
color: red;
}
</style>

<button class="toggle" value=4>Car</button>
<button class="toggle" value=4>House</button>
<button class="toggle" value=1>MC</button>
<button class="toggle" value=1>Moped</button>
<button class="toggle" value=0>Life</button>
<button class="toggle" value=0>Dog</button>
<br/><br/>
<div class="demo"><div>


<script>
var totalAmount = 0;
$(document).ready(function() {
$('.toggle').on('click', function() {
    var value = $(this).val();
    if($(this).hasClass('selected')) {
       $(this).removeClass('selected');
       totalAmount = parseInt(totalAmount) - parseInt(value);
    }
    else {
      $(this).addClass('selected');
      totalAmount = parseInt(totalAmount) + parseInt(value);
    }    
   });
});


if (totalAmount >= 9 ) {
  document.getElementById("demo").innerHTML = "A text to be here if 
totalAmount is higher or equal than 9"
};

else if (totalAmount < 9 && > 4) {
    document.getElementById("demo").innerHTML = "A text to be here if 
totalAmount is higher than 4 and less than 9"
}; 

else if (totalAmount <= 4) {
    document.getElementById("demo").innerHTML = "A text to be here if 
totalAmount is less or equal to 4"
};

else { 
  document.getElementById("demo").innerHTML = "A text to be here if nothing 
else is"
};
</script>

Answer 1

1. 有语法错误，写else正确阻止即 if(){}else{}
2. 条件应该是totalAmount < 9 && totalAmount > 4不是totalAmount < 9 && > 4
3. 在事件处理程序中移动 else if-else block 。
4. 使用document.getElementById()时使用ID属性功能

var totalAmount = 0;
$(document).ready(function() {
  $('.toggle').on('click', function() {
    var value = $(this).val();
    if ($(this).hasClass('selected')) {
      $(this).removeClass('selected');
      totalAmount = parseInt(totalAmount) - parseInt(value);
    } else {
      $(this).addClass('selected');
      totalAmount = parseInt(totalAmount) + parseInt(value);
    }
console.log(totalAmount)
    if (totalAmount >= 9) {
      document.getElementById("demo").innerHTML = "A text to be here if totalAmount is higher or equal than 9"
    } else if (totalAmount < 9 && totalAmount > 4) {
      document.getElementById("demo").innerHTML = "A text to be here if totalAmount is higher than 4 and less than 9"
    } else if (totalAmount <= 4 && totalAmount > 1) {
      document.getElementById("demo").innerHTML = "A text to be here if totalAmount is less or equal to 4"
    } else {
      document.getElementById("demo").innerHTML = "A text to be here if nothing else is"
    };
  });
});

.selected {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="toggle" value=4>Car</button>
<button class="toggle" value=4>House</button>
<button class="toggle" value=1>MC</button>
<button class="toggle" value=1>Moped</button>
<button class="toggle" value=0>Life</button>
<button class="toggle" value=0>Dog</button>
<br/><br/>
<div id="demo">
  <div>