javascript - 如何使此代码更可重用

我试图找到使此代码可重用的最佳方法。

我需要在函数和变量名称中使用Aa1，Aa2，Ab0，而不是“ Aa0”（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;

我希望解释足够清楚。
先感谢您。

最佳答案

编写一个函数，该函数接受和参数，每个元素不断变化，并将悬停函数分配给具有不同参数的每个元素。

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

我建议您可以为元素添加属性，该属性会不断变化并在处理程序中动态访问该属性。

关于javascript - 如何使此代码更可重用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25982738/