Dynamisch Variablen/Methodennamen erstellen

Question

Also hier ist möglicherweise eine sehr einfache Frage, die ich versuche herauszufinden. Ich finde mich ständig in rennen. Nehmen Sie den folgenden Block 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); 
     } 
    }); 

Dies ist offensichtlich super wiederholt und unnötig. Es wäre natürlich sinnvoll, stattdessen eine Art Loop zu erstellen. Etwas, das wie folgt aussieht:

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"); 
     } 
    } 
} 

Ich weiß, das funktioniert nicht. Das Problem besteht natürlich darin, dass Sie den Variablennamen i und den Variablennamen selectedImage nicht in einer Weise verketten können, wie sie oben zwischen den Sternchen zu sehen ist. Ich bin irgendwie neugierig, ob es einen Weg gibt, oder ob es tatsächlich eine Möglichkeit gibt, Variablen-/Methodennamen dynamisch zu erstellen. Vielen Dank.

Answer 1

Sie können einzelne change Handler mit dem Attribut mit Selektor als Parameter jQuery() beginnt, Ziffer Zeichen aus change.target.id, Verwendung Dirac-Notation, die String-Verkettung oder eine Vorlage wörtliche

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

Wir greifen Variable wie Objekt erhalten können [Variablenname ]

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); 
    }