Question

所以这可能是一个非常简单的问题，我想弄清楚。我发现自己经常遇到。采用以下JavaScript / jQuery块：

 $('#image1Path').change(change => {
      if(this.selectedImage1 == "None"){
        $("#image1Display").attr("src", "../../assets/images/NoImageSelected.png");
      } else {
        $("#image1Display").attr("src", "../../assets/images/product-images/" + this.selectedImage1);
      }
    });

    $('#image2Path').change(change => {
      if(this.selectedImage2 == "None"){
        $("#image2Display").attr("src", "../../assets/images/NoImageSelected.png");
      } else {
        $("#image2Display").attr("src", "../../assets/images/product-images/" + this.selectedImage2);
      }
    });

    $('#image3Path').change(change => {
      if(this.selectedImage3 == "None"){
        $("#image3Display").attr("src", "../../assets/images/NoImageSelected.png");
      } else {
        $("#image3Display").attr("src", "../../assets/images/product-images/" + this.selectedImage3);
      }
    });

    $('#image4Path').change(change => {
      if(this.selectedImage4 == "None"){
        $("#image4Display").attr("src", "../../assets/images/NoImageSelected.png");
      } else {
        $("#image4Display").attr("src", "../../assets/images/product-images/" + this.selectedImage4);
      }
    });

    $('#image5Path').change(change => {
      if(this.selectedImage5 == "None"){
        $("#image5Display").attr("src", "../../assets/images/NoImageSelected.png");
      } else {
        $("#image5Display").attr("src", "../../assets/images/product-images/" + this.selectedImage5);
      }
    });

    $('#image6Path').change(change => {
      if(this.selectedImage6 == "None"){
        $("#image6Display").attr("src", "../../assets/images/NoImageSelected.png");
      } else {
        $("#image6Display").attr("src", "../../assets/images/product-images/" + this.selectedImage6);
      }
    });

这显然是超级重复且不必要的。当然，创建某种循环来处理它当然是有意义的。看起来像这样：

for(i = 1; i <= 6; i++){
    $("#image" + i + "Path").change(change => {
       if(this.*selectedImage + i* == "None"){
          $("#image" + i + "Display").attr("src", "../../assets/images/product-images/" + *this.selectedImage + i*);
       } else {
          $("#image" + i + "Display").attr("src", "../../assets/images/NoImageSelected.png");
       }
    }
}

我知道这不起作用。问题当然是你不能以某种方式连接i变量名和selectedImage变量名，就像在星号之间看到的那样。我有点好奇，如果有一些解决方法，或者实际上有一种方法来动态创建变量/方法名称。谢谢。

Answer 1

您可以使用单个change处理程序，其属性以selector开头，作为jQuery()的参数，从change.target.id获取数字字符，使用括号表示法，字符串连接或模板文字

 const path = "../../assets/images/";
 $("[id^=image]").change(change => {
   let n = change.target.id.replace(/\D/g, "");
   let curr = $(`#${change.target.id.replace(/Path/, "Display")}`);
   let selected = this[`selectedImage${n}`];
   curr.attr("src", selected == "None" 
     ? `${path}/NoImageSelected.png`
     : `${path}/product-images/${selected}`);
 });

Answer 2

我们可以像对象[variablename]

那样访问变量

function bindEvent(i){
          $("#image" + i + "Path").change(change => {
               if(this[selectedImage + i] == "None"){
                  $("#image" + i + "Display").attr("src", "../../assets/images/product-images/" + this[selectedImage + i]);
               } else {
                  $("#image" + i + "Display").attr("src", "../../assets/images/NoImageSelected.png");
               }
            }
        }

    for(i = 1; i <= 6; i++){
      bindEvent(i);
    }

动态创建变量/方法名称

2 个答案: