如何使此代碼更可重用

Question

我試圖找到使此代碼可重用的最佳方法。

我需要在函數和變量名稱中使用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;

我希望解釋足夠清楚。 先感謝您。

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 hover ，因為您所描述的事件是鼠標事件：

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

同樣的原則適用於div_map_box_Dd2.style.backgroundImage = "url(images/Dd2/map/map_Aa0.png)"; 也可以使用hover CSS而不是為其編寫代碼。

您的代碼中的這些部分似乎是常量，例如： 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;

而且，如果您做了所有我認為不存在的功能，則無需考慮。