複数の画像を含むカスタムチェックボックス

Question

テキストボックスではなく画像を表示しようとしています。私はこのサイトを見つけました：http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/と私はそれがどのように見えるのが大好きです。しかし、私が必要とするチェックボックスはfacebookとtwiterで 'share also'であるので、チェックボックスには2つの異なるイメージが必要です。

.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で互いの間のクラスを区別：私は最初のCSSを変更することでそれを行うことができ

<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ファイルは 'fb'ではなく 'tw'を持ち、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変数の値を割り当てています。 2つのファイルのうちの2番目のファイルがロードされると、以前の割り当てがCustomに上書きされます。 initaとinitbの機能が別々の場合でも、2番目のJSファイルがロードされると、Customオブジェクトの全体が上書きされます。だから、

、FBcheckbox.js負荷は最初、initaがオブジェクト内で定義されていないが、TWcheckbox.js負荷とCustomの内容ではなく、それに追加することを再割り当てし、ときに、ページのロードイベントが発生TWcheckboxためinitaがもう存在している場合.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... 
}; 

あなたが分離それらを維持したい場合は、事前にその割り当てにオブジェクトの存在をチェックするコードを追加して、オブジェクトが存在する場合、全体をそこに追加ではなく、再割り当てることができますもの。しかし、私は上記の2つを組み合わせることでコード全体の重複を減らすことができます。 window.onloadを使用して初期化の両方の機能を割り当てる

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

は同じ問題を提示します。最近ロードされたJSファイルは、それに追加するのではなく、以前に割り当てられたwindow.onload値を上書きします。ページの火災onloadイベントに複数の機能を割り当てるには、次のような構文を使用する必要があります。FBcheckbox.jsで

：TWcheckboxで

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

。js：

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