在实现排他功能时遇到的问题以及解决方案

问题：

在利用多重循环给商品参数添加点击排他时，发现最后无法实现排他，反而全部选中了，只有最后一行dl能实现排他

原因：

由于给每个dd添加的点击直接调用的是函数的引用所有存在异步英雄，而for循环是同步执行的，这就导致无法使每个dd都正确添加排他函数

解决方法：

在外层包裹一个闭包立即执行函数，让内部执行的变量能不受异步影响，保存在内存当中，完成点击事件的添加排他功能

//点击商品参数之后的颜色排他效果
   clickddBind();
   function clickddBind() {
      /**
       * 思路：
       * 1、获取所有的dl元素，取其中第一个dl元素下的所有dd先做测试，
       *   测试完毕之后在对应dl第一行下标的前面在嵌套一个for循环，目的在变换下标
       * 2、循环所有的dd元素并且添加点击事件
       * 3、确定实际发生事件的目标源对象设置其文字颜色为红色，然后给其他所有的元素颜色都重置为基础颜色(#666)
       */

      //1、找第一个dl下的所有的dd元素
      var dlNodes = document.querySelectorAll('#wrapper #content .contentMain #center #right .rightBottom .chooseWrap dl');

      for (var i = 0; i < dlNodes.length; i++) {

         (function (i) {

            var ddNodes = dlNodes[i].querySelectorAll('dd');

            //2、遍历当前所有的dd元素
            for (var j = 0; j < ddNodes.length; j++) {

               ddNodes[j].onclick = function () {
                  // console.log(i);
                  //  console.log(ddNodes[i]); // undefined
                  //this：表示哪一个元素真实的发生了事件
                  // console.log(this);

                  for (var k = 0; k < ddNodes.length; k++) {
                     ddNodes[k].style.color = "#666";
                  }

                  /**
                   * ddNodes[0].style.color = "#666";
                   * ddNodes[1].style.color = "#666";
                   * ddNodes[3].style.color = "#666";
                   */

                  //假设点击的是第二个元素，下标为1'
                  //ddNodes[1].style.color = "red";
                  //相同下标的dd元素的字体颜色在进行覆盖操作,而其他未点击的元素都是在进行重新设置颜色
                  this.style.color = "red";
               }
            }

            console.log("============")
         })(i)


      }

   }