Javascript refactor

Question

Existe-t-il un meilleur moyen d'écrire cette fonction? J'ai hérité d'un code javascript et j'aimerais le rendre plus concis si possible. En outre, je vais probablement ajouter beaucoup plus d'éléments "thème" et je ne veux pas copier et coller encore et encore.

function imageClick() { 
var theme1 = document.getElementById("li-theme1"); 
var theme2 = document.getElementById("li-theme2"); 
var theme3 = document.getElementById("li-theme3"); 

var imgtheme1 = theme1.getElementsByTagName("img"); 
var imgtheme2 = theme2.getElementsByTagName("img"); 
var imgtheme3 = theme3.getElementsByTagName("img"); 

var inputtheme1 = document.getElementById("radiotheme1"); 
var inputtheme2 = document.getElementById("radiotheme2"); 
var inputtheme3 = document.getElementById("radiotheme3"); 

imgtheme1[0].onclick = function() { 
    inputtheme1.checked = true; 
    highlightChoice("li-theme1"); 
} 
imgtheme2[0].onclick = function() { 
    inputtheme2.checked = true; 
    highlightChoice("li-theme2"); 
} 
imgtheme3[0].onclick = function() { 
    inputtheme3.checked = true; 
    highlightChoice("li-theme3"); 
} 
} 

Answer 1

function imageClick() 
{ 
    for (var i=1; i<4; i++) 
    { 
     var theme = document.getElementById("li-theme"+i); 
     var imgtheme = theme.getElementsByTagName("img"); 
     imgtheme[0].onclick = (function (current) 
     { 
      return function() 
      { 
       document.getElementById("inputtheme"+current) = true; 
       highlightChoice("li-theme"+current); 
      } 
     })(i); 
    } 
} 

Si vous souhaitez ajouter d'autres itérations à la date ultérieure, il suffit d'augmenter la 4 en i<4 au nombre d'itérations que vous souhaitez effectuer + 1.

Answer 2

J'ai "hardcoded" la fonction imageClick() à ceux que vous avez spécifié, mais vous pouvez changer cela pour être un « for (var i = 1; i < 4; i ++) { imageClickItem (i);} "boucle de type si vous le souhaitez.

function imageClick() 
{ 
    imageClickItem(1); 
    imageClickItem(2); 
    imageClickItem(3); 
} 

function imageClickItem(itemNumber) 
{ 
    var theme = document.getElementById("li-theme" + itemNumber); 
    var imgtheme = theme.getElementsByTagName("img"); 
    var inputtheme = document.getElementById("radiotheme" + itemNumber); 

    imgtheme[0].onclick = function() 
    { 
     inputtheme.checked = true; 
     highlightChoice(theme.id); 
    } 
}