Question

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

我需要，而不是＆＃34; Aa0＆＃34;在函数和变量名称中，也能够有Aa1，Aa2，Ab0 ......（40次）

我知道我可以复制粘贴并更改这些字母（并重复这个过程40次），但这绝对不是更清洁的方法。

有没有办法制作＆＃34; Aa0＆＃34;某种可以容纳多个值的变量？

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数组存储这些值吗？具体来说，您可以使用array [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)";，hover也可以使用div_key_box_Dd1 css而不是为其编写代码。

代码中的这些部分似乎是常量，例如：var par_txt_Aa = 'main title sub title'; var par_key_Aa = 'some text notimportant'; div_key_box_Dd1.innerHTML = par_key_Aa;被赋予一个永不改变的值：

{{1}}

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

如何使这个代码更可重用

3 个答案: