明确定义的事情未定义

Question

我已经仔细研究了一下我目前面临的问题的线索，但我似乎没有得到这个问题。基本上，$(allSelects).change(function(){...中定义的变量没有被赋予在该函数之外定义的变量的值。

最初我在那里有整个选择路径，但是试图减少脚本中的重复。有谁知道我做错了什么，以及为什么这些值是未定义的，即使它们被定义了？我想也许这是范围问题，但上述函数中的变量应该能够看到该函数之外的变量。

任何帮助将不胜感激。这是我的代码......

$(window).load(function(){

var productFamily = ["Beaches","Leios","Lull"];
var productType = ["Shelter","Restroom"];
var sizeRange = ["4x4","6x4","8x4","8x6"];

for ( let p in productFamily) {
  for ( let t in productType ) {
    for ( let i in sizeRange ) {

    var selectSize = 'select[name="properties[' + productFamily[p] + ' ' + productType[t] + ' Size]"]';
    var selectFrame = 'select[name="properties[' + productFamily[p] + ' ' + productType[t] + ' ' + sizeRange[i] + ' Frame]"]';
    var selectFasteners = 'select[name="properties[' + productFamily[p] + ' ' + productType[t] + ' ' + sizeRange[i] + ' Fasteners]"]';
    var selectRoof = 'select[name="properties[' + productFamily[p] + ' ' + productType[t] + ' ' + sizeRange[i] + ' Roof]"]';
    var selectInfill = 'select[name="properties[' + productFamily[p] + ' ' + productType[t] + ' ' + sizeRange[i] + ' Infill]"]';
    var selectColumns = 'select[name="properties[' + productFamily[p] + ' ' + productType[t] + ' ' + sizeRange[i] + ' Column]"]';
    var allSelects =  selectSize + ',' + selectFrame + ',' + selectFasteners + ',' + selectRoof + ',' + selectInfill + ',' + selectColumns;

    console.log(allSelects);

    $(allSelects).change(function(){

        var mySizeSelection = $(selectSize).val();
        var myFrameSelection = $(selectFrame).val();
        var myFastenersSelection = $(selectFasteners).val();
        var myColumnSelection = $(selectColumns).val();
        var myInfillSelection = $(selectInfill).val();
        var myRoofSelection = $(selectRoof).val();

        if (mySizeSelection == null) {
          console.log("This variable is null.");
        }

        if ( mySizeSelection == "4x4" ) {
          mySizeSelection = "44";
        } else if ( mySizeSelection == "6x4" ) {
          mySizeSelection = "64";
        } else if ( mySizeSelection == "8x4" ) {
          mySizeSelection = "84";
        } else if ( mySizeSelection == "8x6" ) {
          mySizeSelection = "86";
        } else {
          mySizeSelection = "Error";
        }

        if ( myFrameSelection == "Galvanised" ) {
          myFrameSelection = "G";
        } else if ( myFrameSelection == "Painted" ) {
          myFrameSelection = "P";
        } else {
          myFrameSelection = "Error";
        }

        if ( myColumnSelection == "Galvanised" ) {
          myColumnSelection = "G";
        } else {
          myColumnSelection = "P";
        }

        if ( myRoofSelection == "Colorbond" ) {
          myRoofSelection = "C";
        } else if ( myRoofSelection == "Polycarbonite"  ) {
          myRoofSelection = "P";
        } else {
          myRoofSelection = "N";
        }

        if ( myInfillSelection == "Yes" ) {
          myInfillSelection = "Y";
        } else {
          myInfillSelection = "N";
        }

        if ( myFastenersSelection == "Galvanised" ) {
          myFastenersSelection = "G";
        } else if ( myFastenersSelection == "Stainless Steel" ) {
          myFastenersSelection = "G";
        } else {
          myFastenersSelection = "Error";
        }

        if ( (mySizeSelection) || (myFrameSelection) || (myFastenersSelection) ) {
            var url = "//my.testwebsite.com/"+ productFamily[p] + "_" + productType[t] + "/" + productFamily[p].toUpperCase() + "_" + mySizeSelection + myFrameSelection + "C" + myFastenersSelection + ".jpg";
            $('.product-main-image img').attr("src",url);
            console.log(url);
        } else {
            $('.product-main-image img').attr("src","//another.website.com/logo.png");
        }

    });
  }
}
}

});

正如我在下面的评论中所提到的，我在尝试使其更简洁之前发布了原始脚本，因为您可以看到更改处理程序中存在一些重复和大量内容。

$(window).load(function(){

  var productFamily = ["Beaches","Leios","Lull"];
  var productType = ["Shelter","Restroom"];
  var sizeRange = ["4x4","6x4","8x4","8x6"];

  for ( let p in productFamily ) {
    for ( let t in productType ) {
      for ( let i in sizeRange ) {

        $(' select[name="properties[' + productFamily[p] + ' ' + productType[t] + ' Size]"],select[name="properties[' + productFamily[p] + ' ' + productType[t] + ' ' + sizeRange[i] + ' Frame]"], select[name="properties[' + productFamily[p] + ' ' + productType[t] + ' ' + sizeRange[i] + ' Fasteners]"],select[name="properties[' + productFamily[p] + ' ' + productType[t] + ' ' + sizeRange[i] + ' Roof]"], select[name="properties[' + productFamily[p] + ' ' + productType[t] + ' ' + sizeRange[i] + ' Infill]"], select[name="properties[' + productFamily[p] + ' ' + productType[t] + ' ' + sizeRange[i] + ' Column]"]').change(function(){

            var mySizeSelection = $('select[name="properties[' + productFamily[p] + ' ' + productType[t] + ' Size]"]').val();
            var myFrameSelection = $('select[name="properties[' + productFamily[p] + ' ' + productType[t] + ' ' + sizeRange[i] + ' Frame]"]').val();
            var myFastenersSelection = $('select[name="properties[' + productFamily[p] + ' ' + productType[t] + ' ' + sizeRange[i] + ' Fasteners]"]').val();
            var myColumnSelection = $('select[name="properties[' + productFamily[p] + ' ' + productType[t] + ' ' + sizeRange[i] + ' Roof]"]').val();
            var myInfillSelection = $('select[name="properties[' + productFamily[p] + ' ' + productType[t] + ' ' + sizeRange[i] + ' Infill]"]').val();
            var myRoofSelection = $('select[name="properties[' + productFamily[p] + ' ' + productType[t] + ' ' + sizeRange[i] + ' Column]"]').val();

            if (mySizeSelection == null) {
              console.log("This variable is null.");
            }

            if ( mySizeSelection == "4x4" ) {
              mySizeSelection = "44";
            } else if ( mySizeSelection == "6x4" ) {
              mySizeSelection = "64";
            } else if ( mySizeSelection == "8x4" ) {
              mySizeSelection = "84";
            } else {
              mySizeSelection = "86";
            }

            if ( myFrameSelection == "Galvanised" ) {
              myFrameSelection = "G";
            } else {
              myFrameSelection = "P";
            }

            if ( myColumnSelection == "Galvanised" ) {
              myColumnSelection = "G";
            } else {
              myColumnSelection = "P";
            }

            if ( myRoofSelection == "Colorbond" ) {
              myRoofSelection = "C";
            } else if ( myRoofSelection == "Polycarbonite"  ) {
              myRoofSelection = "P";
            } else {
              myRoofSelection = "N";
            }

            if ( myInfillSelection == "Yes" ) {
              myInfillSelection = "Y";
            } else {
              myInfillSelection = "N";
            }

            if ( myFastenersSelection == "Galvanised" ) {
              myFastenersSelection = "G";
            } else {
              myFastenersSelection = "G";
            }

            if ( (mySizeSelection) || (myFrameSelection) || (myFastenersSelection) ) {
            var url = "//my.testwebsite.com/"+ productFamily[p] + "_" + productType[t] + "/" + productFamily[p].toUpperCase() + "_" + mySizeSelection + myFrameSelection + "C" + myFastenersSelection + ".jpg";
                $('.product-main-image img').attr("src",url);
                console.log(url);
            } else {
                $('.product-main-image img').attr("src","//another.website.com/logo.png");
            }


        });
      }
    }
  }

});