Как сделать этот код более многоразовым

Question

Я пытаюсь найти лучший способ сделать этот код многоразовым.

мне нужно, вместо «AA0» в функциональных и переменных имена, чтобы быть в состоянии иметь AA1, Aa2, АВ0 ... (40 раз)

Я знаю, что я мог бы просто копипаст и изменения эти письма (и повторяют процесс 40 раз), но это определенно не более чистый подход.

Есть ли способ сделать каждый экземпляр «Aa0» некоторой переменной, которая может содержать несколько значений?

function mov_Aa0() { 
    var div_bor_Aa0 = document.getElementsByClassName("bor_Aa0"); 

    for (var div_bor_Aa0_i = 0; div_bor_Aa0_i < div_bor_Aa0.length; div_bor_Aa0_i++) { 
     div_bor_Aa0[div_bor_Aa0_i].style.borderColor = "#FFF"; 
    } 

    var div_txt_box_Aa0 = document.getElementById("txt_box_Aa0"); 
    var par_txt_Aa0 = '<p class="txt">main title</p><br /><p class="txt">sub title</p>'; 
    div_txt_box_Aa0.innerHTML = par_txt_Aa0; 
    var par_key_Aa0 = '<p class="txt g">some text</p><br /><p class="txt o">not</p><p class="txt g">important</p>'; 
    div_key_box_Dd1.innerHTML = par_key_Aa0; 
    div_map_box_Dd2.style.backgroundImage = "url(images/Dd2/map/map_Aa0.png)"; 
} 

var div_con_box_Aa0 = document.getElementById("con_box_Aa0"); 

div_con_box_Aa0.onmouseover = mov_Aa0; 

Надеюсь, что объяснение достаточно ясное. Спасибо заранее.

Answer 1

Напишите функцию, которая принимает и аргумент, который продолжает меняться для каждого элемента и назначает функцию наведения каждому элементу с разными аргументами.

function mov(x){ 
    var div_bor = document.getElementsByClassName("bor_"+x); 
    for (var div_bor_i = 0; div_bor_i < div_bor.length; div_bor_i ++){ 
     div_bor[div_bor_i].style.borderColor = "#FFF"; 
    }; 
    var div_txt_box = document.getElementById("txt_box_"+x); 
    var par_txt = '<p class="txt">main title</p><br /><p class="txt">sub title</p>'; 
    div_txt_box.innerHTML = par_txt; 
    var par_key = '<p class="txt g">some text</p><br /><p class="txt o">not</p><p class="txt g">important</p>'; 
    div_key_box_Dd1.innerHTML = par_key; 
    div_map_box_Dd2.style.backgroundImage = "url(images/Dd2/map/map_"+x+".png)"; 
} 

var div_con_box_Aa0 = document.getElementById("con_box_Aa0"); 
div_con_box_Aa0.onmouseover = function(){ 
    mov('Aa0'); 
} 

Я предлагаю и можно добавить и приписать к элементу, который сохраняет изменения и доступа к этому атрибуту динамически в обработчике.

Answer 2

Можете ли вы использовать 2D-массив для хранения этих значений? В частности, вы можете использовать массив [n] для хранения всех элементов с суффиксом n.

Answer 3

Вот несколько рекомендаций по моей части:

div_bor[div_bor_i].style.borderColor = "#FFF"; 

выглядит, как он может быть преобразован в CSS парения, так как событие, как ваш описал это событие мыши:

.AaSomething:hover { 
     border-color:#ffffff; 
} 

Этот же принцип применяется для div_map_box_Dd2.style.backgroundImage = "url(images/Dd2/map/map_Aa0.png)";, который также может использовать css hover вместо написания кода для него.

Эти разделы в вашем коде, как представляется, константы, например: div_key_box_Dd1 в настоящее время присваивается значение, которое никогда не меняется:

var par_txt_Aa = '<p class="txt">main title</p><br /><p class="txt">sub title</p>'; 
var par_key_Aa = '<p class="txt g">some text</p><br /><p class="txt o">not</p><p class="txt g">important</p>'; 
div_key_box_Dd1.innerHTML = par_key_Aa; 

И если вы сделаете все, что я думаю, что не нужно для этой функции к существует.