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时，Custom页面加载事件触发时不再存在，因为TWcheckbox.js的inita版本不包含Custom。

由于看起来JS文件中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

使用if (window.addEventListener) { window.addEventListener("load",Customa.inita,false); } else if (window.attachEvent) { window.attachEvent("onload",Customa.inita); }分配两个init函数会出现同样的问题。最近加载的JS文件将覆盖先前分配的window.onload值而不是添加到它。要分配多个函数来触发页面加载，您应该使用如下语法：

在FBcheckbox.js中：

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

在TWcheckbox.js中：

{{1}}

具有多个图像的自定义复选框

1 个答案: