Question

我无法复制我的工作投票功能代码。它只适用于一个副本，但一旦我复制并粘贴它。即使我更改了名称，值，类或ID名称似乎也会导致错误，如果我点击向上投票或投票向下箭头，只有一个副本更改文本而不是独立工作。

这是一个不完整的小提琴，需要一些故障排除：

帮我弄清楚如何获得以下代码的独立第二份副本：

<input name="vote" class="voteup"  type="radio" value="Yes" onclick = "showMessage(1)"/>
 <label class="voteup-label" for="voteup"></label>   

<!--Vote Number--> 
<div class="votenumber">

<div id="voteup" style="display:none">100<span class="percentagesign">%</span></div> 

<div id="notrated">Not Rated</div>

<div id="votedown" style="display:none">0<span class="percentagesign">%</span></div>

</div><!--End Votenumber--> 

<input name="vote" class="votedown" type="radio" value="No" onclick = "showMessage(2)"/>
<label for="votedown"></label>
<p class="votecounter">0 Votes</p>

</div><!--End Voting-->

使用Javascript：

<!--Voteup or Votedown-->
$(document).ready(function() {     
  $('.vote').click(function() {
    $('img', this).attr('src', function(i, oldSrc) {
        return oldSrc == 'voteup.png' ? 'votedown.png' : 'voteup.png';
    });
    $('.voteswitch').toggle(400);
    return false;
  });
});

    function showMessage(which) {
if (which == 1) {
document.getElementById("voteup").style.display = "block";
document.getElementById("votedown").style.display = "none";
document.getElementById("notrated").style.display = "none";
}
else {
document.getElementById("voteup").style.display = "none";
document.getElementById("votedown").style.display = "block";
document.getElementById("notrated").style.display = "none";    
}
}

CSS：

 .votesystem {
        display: inline-block;
        list-style-type: none;
        padding-top: 3px;
        border-left: #000 1px solid;
        border-bottom: #000 1px solid;
        width: 85px;
        text-align: center;
        height: 107px;
        float: right;
        position: relative;
    }


 input.voteup[type="radio"]{
    opacity: 0; right:33px; margin-top:7px;
    position:absolute; cursor:pointer;
}
 input.voteup[type="radio"]+label{
    background:url(images/voteupall.png) bottom center no-repeat; padding-left:40px; padding-bottom:10px;
}
 input.voteup[type="radio"]:checked+label{
    background:url(images/voteupall.png)top center no-repeat; padding-left:40px; padding-bottom:10px;
}

 input.voteup[type="radio"]:hover+label{
    background:url(images/voteupall.png)top center no-repeat; padding-left:40px; padding-bottom:10px;
}


 input.votedown[type="radio"]{
    opacity: 0; right:33px; margin-top:-5px;
    position:absolute; cursor:pointer;
}
 input.votedown[type="radio"]+label{
    background:url(images/votedownall.png)top center no-repeat; padding-left:40px; padding-top:9px; 
}
 input.votedown[type="radio"]:checked+label{
    background:url(images/votedownall.png)bottom center no-repeat; padding-left:40px; padding-top:9px;
}

 input.votedown[type="radio"]:hover+label{
    background:url(images/votedownall.png)bottom center no-repeat; padding-left:40px;  padding-top:9px;
}


.votenumber { color:#666; font-size:22px; margin:0; font-weight:bold; font-family:Arial, Helvetica, sans-serif; line-height:42px; padding-top:5px; padding-bottom:2px;  }

#notrated { font-size:15px; color:#999; }

#voteup { margin-left:-2px;}

#votedown { margin-left:-2px;}

.percentagesign { font-size:15px; margin-top:-3px; position:absolute; }

.votecounter { position:relative; top:8px; color:#000; font-family:Tahoma, Geneva, sans-serif; font-size:12px; }

重复的Javascript投票功能导致奇怪的错误

0 个答案: