Javascript 如何使此代码更加可重用

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

我需要，而不是“Aa0”在函数和变量名称，也能够有Aa1，Aa2，Ab0。。。（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;

函数mov_Aa0（）{
var div_bor_Aa0=document.getElementsByClassName（“bor_Aa0”）；
对于（变量div_bor_Aa0_i=0；div_bor_Aa0_i某些文本不重要；
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；

我希望解释清楚。

---

提前谢谢。

能否使用2D数组存储这些值？具体来说，您可以使用array[n]来存储后缀为n的所有元素。

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

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

函数mov（x）{
var div_bor=document.getElementsByClassName（“bor_”+x）；
对于（变量div_bor_i=0；div_bor_i某些文本不重要；
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'）；
}

---

我建议您可以向不断更改的元素添加属性，并在处理程序中动态访问该属性。

以下是我的一些建议：

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，而不是为其编写代码

代码中的这些部分似乎是常量，例如：

div\u key\u box\u 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;

var par_txt_Aa='
主标题

子标题
；
var par_key_Aa='
某些文本不重要；
div_key_box_Dd1.innerHTML=par_key_Aa；

---

如果你做了所有这些，我认为这个函数不需要存在。

什么是

div\u key\u box\u Dd1

和

div\u map\u box\u Dd2

这些将根据你对Aa1、Aa2等的规格被覆盖？“某种可以保存多个值的变量”被称为数组或集合。不要重复这个函数，取而代之的是，使用参数

函数mov_something（which_thing）{…

调用

mov_something（“Aa0”）

，比如

getElementsByClassName（“bor”+which_thing）

div\u key\u box\u Dd1和div\u map\u box\u Dd2是全局变量。这40个函数中的每一个都将使用它们，因此它们不应该被更改。“不被更改”，但它们是由您的一个方法分配的