여러 이미지가있는 사용자 정의 확인란

Question

텍스트 상자 대신 이미지가 있어야합니다. 인터넷 검색 :이 사이트를 발견 : http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ 그리고 정말 어떻게 보이는지. 하지만 필요한 확인란이 facebook과 twiter에서 '공유도'이므로 체크 상자에 두 개의 서로 다른 이미지가 필요합니다.

.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 변수 값을 할당하고 있습니다. 두 파일 중 두 번째 파일이로드되면 이전 할당을 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 값을 추가하지 않고 덮어 씁니다. 페이지의 온로드를 해고하는 하나 개 이상의 기능을 할당하려면 다음과 같은 구문을 사용한다 : 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); 
}