具有多個圖像的自定義複選框

Question

我試圖讓圖像而不是文本框。谷歌搜索，我發現這個網站：http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/，我真的很喜歡它的外觀。但由於我需要的複選框是在facebook和twiter中「共享」，我需要在複選框上顯示兩個不同的圖像。我能做到這一點，首先修改CSS：

.checkboxfb { 
width: 23px; height: 23px; padding: 0 5px 0 0; 
background: url(images/files/ico_facebook_mult_sml2.png) no-repeat; 
display: block; clear: left; float: left;} 

.checkboxtw { 
width: 23px; height: 22px; padding: 0 5px 0 0; 
background: url(images/files/twitter_logo_mult_sml.png) no-repeat; 
display: block; clear: left; float: left;} 

我在HTML區分彼此之間的類：

<form method="post" action="."> 
<input type="checkbox" name="fb" class="styledfb" />FB <br /><br /> 
<input type="checkbox" name="tw" class="styledtw" />TW </form> 

，複製腳本，FBcheckbox.js：

document.write('<style type="text/css">input.styled**fb** { display: none; } select.styled**fb** { position: relative; width: ' + selectWidth + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } .disabled { opacity: 0.5; filter: alpha(opacity=50); }</style>'); 

var Custom = { 
inita: function() { 
    var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active; 
    for(a = 0; a < inputs.length; a++) { 
     if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className == "styledfb") { 
      span[a] = document.createElement("span"); 
      span[a].className = inputs[a].type + "**fb**"; 

當然，其他js文件將有'tw'而不是'fb'，它被稱爲TWcheckbox.js。 （你可以在這裏看到整個js：http://pasionesargentas.webatu.com/js/checkbox/FBcheckbox.js和http://pasionesargentas.webatu.com/js/checkbox/TWcheckbox.js）。

在標題中，我呼籲這兩個文件：

<script type="text/javascript" src="js/checkbox/FBcheckbox.js"></script> 
<script type="text/javascript" src="js/checkbox/TWcheckbox.js"></script> 

現在，有趣的是，只有一個在工作一段時間。在標題中調用它們時，以秒爲單位。測試文件是http://pasionesargentas.webatu.com/test1.php

Answer 1

兩個腳本文件都分配了Custom變量的值。當兩個文件中的第二個被加載時，它將覆蓋之前的作業爲Custom。即使您有單獨的inita和initb函數，當加載第二個JS文件時，整個Custom對象都會被覆蓋。

所以，如果FBcheckbox.js先加載，inita在對象中定義，但是當TWcheckbox.js負載和重新分配的Custom的內容，而不是添加，inita不再存在的頁面加載事件觸發時，因爲TWcheckbox .js的版本Custom不包括inita。

由於在你的JS文件中Custom對象的唯一函數看起來好像是inita和initb，所以我建議將它們分配到文件中。喜歡的東西：

var Custom = { 
    inita: function() { 
    // ...your code here... 
    }, 
    initb: function() { 
    // ...your code here... 
    }, 
    pushed: function() { 
    // ...your code here... 
    }, 
    // etc... 
}; 

如果你想要讓他們分開，你可以添加在此之前它的任務，如果物體存在檢查對象存在的代碼，添加到它，而不是整個重新分配事情。不過，我認爲將上述兩者結合起來可以減少代碼中的重複。

if (typeof(Custom)!="undefined" && !Custom.inita) { 
    Custom.inita = function() { /* ...your code here... */ } 
} else if (typeof(Custom)=="undefined") { 
    var Custom = { 
    // ...your code here... 
    }; 
}; 

使用window.onload分配兩個init函數都會出現同樣的問題。最近加載的JS文件將覆蓋之前分配的window.onload值，而不是添加到它。要指定一個以上的功能來觸發頁面的onload事件，你應該使用類似下面的語法：

在FBcheckbox.js：

if (window.addEventListener) { 
    window.addEventListener("load",Customa.inita,false); 
} else if (window.attachEvent) { 
    window.attachEvent("onload",Customa.inita); 
} 

在TWcheckbox。js：

if (window.addEventListener) { 
    window.addEventListener("load",Customb.initb,false); 
} else if (window.attachEvent) { 
    window.attachEvent("onload",Customb.initb); 
}