研究了如何使局部变量(colorSelect1，colorSelect2）全局，这样我就可以执行逻辑语句

这里有两个三个问题，只有这三个问题都解决了，代码才能工作。

问题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>

从分配值的函数中去掉var。例如：

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

您首先将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;
             });
           })