难以理解如何使局部变量（colorSelect1，colorSelect2）成为全局变量，以便我可以执行逻辑语句

Question

我很难确定为何无法执行。当我 consoloe.log colorSelect 变量时，它们 return 正确的值。但是，我认为断开连接的是变量是在函数内创建的，因此不被识别为全局变量，这否定了我的逻辑语句。关于如何规避此问题的任何建议？

var colorSelect1 = null;
var colorSelect2 = null;

 //selecting the first color
$(function() {
    $(".color1").click(function() {
      $(".color1").removeClass('active');
      $(this).addClass('active');
      var colorSelect1 = $(this).css("background-color");
      console.log(colorSelect1);
      return colorSelect1;
    });
  })
  //selecting the second color
 $(function() {
  $(".color2").click(function() {
    $(".color2").removeClass('active');
    $(this).addClass('active');
    var colorSelect2 = $(this).css("background-color");
    console.log(colorSelect2);
    return colorSelect2;
  });
})

 // making a new color based upon the two color selections
if (colorSelect1 === "red" && colorSelect2 === "yellow") {
  console.log("We have orange!");
  $(".colorCombo").css('background-color', 'orange');
}

.all-divs {
  display: block;
  float: left;
}
.active {
  border: 2px solid;
}
.colorCombo {
  float: left;
  border: 2px solid;
  width: 150px;
  height: 150px;
  margin-left: 393px;
}
.group1 {
  display: block;
  float: left;
  margin: 10px;
}
.group2 {
  display: block;
  float: left;
  margin: 10px;
}
#red1 {
  width: 150px;
  height: 150px;
  background-color: red;
  display: block;
  float: left;
}
#blue1 {
  width: 150px;
  height: 150px;
  background-color: blue;
  display: block;
  float: left;
}
#yellow1 {
  width: 150px;
  height: 150px;
  background-color: yellow;
  display: block;
  float: left;
}
#red2 {
  width: 150px;
  height: 150px;
  background-color: red;
  display: block;
  float: left;
}
#blue2 {
  width: 150px;
  height: 150px;
  background-color: blue;
  display: block;
  float: left;
}
#yellow2 {
  width: 150px;
  height: 150px;
  background-color: yellow;
  display: block;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  Please select a color.
</div>
<div class="all-divs">

  <div class="group1">

    <div class="color1" id="red1">

    </div>
    <div class="color1" id="blue1">

    </div>
    <div class="color1" id="yellow1">

    </div>
  </div>

  <div class="group2">
    <div class="color2" id="red2">

    </div>
    <div class="color2" id="blue2">

    </div>
    <div class="color2" id="yellow2">

    </div>
  </div>
</div>
<div class="colorCombo">

</div>

Answer 1

您这里有两个三个问题，您的代码只有在这三个问题都得到解决后才能工作。

问题 1：正如您正确推测的那样，您只影响函数中的变量。

要解决此问题，请删除这些函数中这些变量之前的 var：

colorSelect1 = $(this).css("background-color");

colorSelect2 = $(this).css("background-color");

这将导致这些变量名引用外部作用域中的变量，而不仅仅是函数中的变量。

问题 2： 您的 if 语句在任何这些事件发生之前很久就执行了。它不会随着变量值的变化而不断评估。

要解决此问题，您可以将 if 语句放在它自己的函数中：

function checkColors() {
    if(colorSelect1 === "red" && colorSelect2 === "yellow"){
        console.log("We have orange!");
        $(".colorCombo").css('background-color', 'orange');
    }
}

并在您的每个事件中调用它：

$(".color1").click(function() {
    $(".color1").removeClass('active');
    $(this).addClass('active');
    colorSelect1 = $(this).css("background-color");
    checkColors();
});

问题 3： 使用 .css('background-color') 不一定会给您在 CSS 中指定的值。例如，在 Chrome 中，在具有 red 背景的元素上调用它会导致值 rgb(255, 0, 0).

一种补救方法是在您的元素上使用 data- 来指定您需要的值，然后使用 .data():

检索它们

<div class="color1" id="red1" data-color="red">

colorSelect1 = $(this).data('color');

最后，虽然与您遇到的问题无关，但您错误地使用了 header 和 footer。您命名为 header 的标签应该命名为 head，并且您应该删除 footer，因为页脚应该只出现在内部 body 元素，如果它是空的，就没有意义了。

完整的解决方案，还有一些其他改进：

var colorSelect1 = null;
var colorSelect2 = null;

$(function() {

  //selecting the first color
  $(".color1").click(function() {
    $(".color1").removeClass('active');
    $(this).addClass('active');
    colorSelect1 = $(this).data("color");
    console.log(colorSelect1);
    checkColors();
  });

  //selecting the second color
  $(".color2").click(function() {
    $(".color2").removeClass('active');
    $(this).addClass('active');
    colorSelect2 = $(this).data("color");
    console.log(colorSelect2);
    checkColors();
  });

});

// making a new color based upon the two color selections
function checkColors() {
  if(colorSelect1 === "red" && colorSelect2 === "yellow"){
    console.log("We have orange!");
    $(".colorCombo").css('background-color', 'orange');
  }
}

.all-divs {
  display: block;
  float: left;
}
.active {
  border: 2px solid;
}
.colorCombo {
  float: left;
  border: 2px solid;
  width: 150px;
  height: 150px;
  margin-left: 393px;
}
.group1 {
  display: block;
  float: left;
  margin: 10px;
}
.group2 {
  display: block;
  float: left;
  margin: 10px;
}
.color1, .color2 {
  width: 150px;
  height: 150px;
  display: block;
  float: left;
}
[data-color=red] {
  background-color: red;
}
[data-color=blue] {
  background-color: blue;
}
[data-color=yellow] {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  Please select a color.
</div>
<div class="all-divs">

  <div class="group1">

    <div class="color1" id="red1" data-color="red">

    </div>
    <div class="color1" id="blue1" data-color="blue">

    </div>
    <div class="color1" id="yellow1" data-color="yellow">

    </div>
  </div>

  <div class="group2">
    <div class="color2" id="red2" data-color="red">

    </div>
    <div class="color2" id="blue2" data-color="blue">

    </div>
    <div class="color2" id="yellow2"  data-color="yellow">

    </div>
  </div>
</div>
<div class="colorCombo">

</div>

Answer 2

您首先将 colorSelect1 和 colorSelect2 声明为全局，然后在函数中将它们重新声明为局部。
如果您删除函数中的 var，它应该可以工作。

//selecting the first color
    $(function() {
         $(".color1").click(function() {
             $(".color1").removeClass('active');
             $(this).addClass('active');
             colorSelect1 = $(this).css("background-color");
             console.log(colorSelect1);
             return colorSelect1;
           });
         })
       //selecting the second color
       $(function()  {
          $(".color2").click(function() {
               $(".color2").removeClass('active');
               $(this).addClass('active');
               colorSelect2 = $(this).css("background-color");
               console.log(colorSelect2);
               return colorSelect2;
             });
           })

Answer 3

从你赋值的函数中取出 var。例如:

 $(".color1").click(function() {
     $(".color1").removeClass('active');
     $(this).addClass('active');
     colorSelect1 = $(this).css("background-color");
     console.log(colorSelect1);
     return colorSelect1;
   });
 })

Answer 4

var colorSelect1 = null;
var colorSelect2 = null;

//selecting the first color
// this is your doc ready, just use one
$(function() {

     $(".color1").click(function() {
         $(".color1").removeClass('active');
         $(this).addClass('active');
         colorSelect1 = $(this).css("background-color"); // remove var
         console.log(colorSelect1);
         return colorSelect1;
      });

    $(".color2").click(function() {
           $(".color2").removeClass('active');
           $(this).addClass('active');
           colorSelect2 = $(this).css("background-color"); // remove var
           console.log(colorSelect2);
           return colorSelect2;
         });

    // making a new color based upon the two color selections
    if(colorSelect1 === "red" && colorSelect2 === "yellow"){
        console.log("We have orange!");
        $(".colorCombo").css('background-color', 'orange');
     }

 }); //End Doc Ready

删除 var。 var 会使它成为封闭函数内部的局部变量，当你删除它时，它指的是你在文档外初始化的两个就绪。

难以理解如何使局部变量（colorSelect1，colorSelect2）成为全局变量，以便我可以执行逻辑语句

Stumped on how to make local variables (colorSelect1, colorSelect2) global so that I can execute the logic statement

javascript

jquery

global

local