Question

对不起，标题不太准确。

<script>
var theID = document.getElementById('result1');

function change(){
    var checkboxes = document.getElementsByClassName('checkbox');
    var chekboxInputs = Array.from(checkboxes).map(a => a.querySelector('input'));
    var allAreUnselected = chekboxInputs.every(function(elem){
       return !elem.checked;
    });
    if(allAreUnselected){
       chekboxInputs.forEach(function(input){
          Array.from(document.querySelectorAll("." + input.getAttribute("rel"))).forEach(function(theID){
              theID.style.background = 'blue';
          });
       });
    }
    else {
      chekboxInputs.forEach(function(input){
          Array.from(document.querySelectorAll("." + input.getAttribute("rel"))).forEach(function(theID){
            theID.style.background = input.checked ? 'red' : 'gray';
          });
       });
    }
}
change();
</script>

基本上，正如我所写的，一旦选中一个复选框，它应该将背景黄色的div＃id更改为红色。但是出于某种原因，它坚持只将class作为目标div。

我知道逻辑上肯定有问题，我可以说几件事，但我不明白。例如，在“ if（allAreUnselected）”处，是否不应该将黄色框的背景设置为蓝色？因为它们都是都未选中？

我要实现的全部目的是能够在函数内部操纵div＃。有帮助吗？

谢谢

Answer 1

在脚本中，您早先在名为theID的变量中捕获了您正在谈论的DOM元素：

var theID = document.getElementById('result1');

稍后，在要更改元素颜色的位置，您正在forEach中使用匿名函数，该函数具有名为theID的参数 also ：

(/* lots of code */).forEach(function(theID){
    theID.style.background = 'blue'
});

该参数名称掩盖了先前定义的变量，因此当您在该函数中使用theID时，它引用的是每个forEach元素而不是＃result1元素-并且您最终从未尝试更改颜色的＃result1。

如果您想更改该容器的颜色，请使用其他参数名称，以免该变量被其掩盖：

(/* lots of code */).forEach(function(foo){
    foo.style.background = 'blue'
    theID.style.background = // your logic here for deciding what color #result1 should be
});

...或者在匿名函数之外执行：

if(allAreUnselected){
   theID.style.background = 'blue';
   chekboxInputs.forEach(function(input){
     (/* lots of code */).forEach(function(theID){   // (I'd still change that parameter name, though, because masked variables are confusing)

Answer 2

在第41行中，您认为theID变量是错误的。在这种情况下，变量theID将从forEach函数作为回调函数（theID）{..}的参数传递的变量中消失。

forEach将数组中的每个项目作为参数传递给您在每次迭代中声明的函数。尝试更改此变量的名称，例如。 ...forEach(function(chekboxInput) { chekboxInput.style.background = 'blue';}不会改变。

从这里theID不再是id = result1的div，而是要迭代的chekboxInputs中的元素之一。

另请参阅Daniel Beck的答案。

功能不符合预期。为什么？

2 个答案: