触发点击事件功能只有一次，轮询，小提琴Jquery

Question

我正在开展这项民意调查，

问题

一旦页面开始，我需要使用默认值设置轮询（请参阅代码）....这是我不想要的这种初始跳跃向后运动。

我触发了主要点击事件，但这会为每个选项增加1 vote ... http://jsfiddle.net/hhgg6d4z/1/

预期

我不希望触发器为每个选项添加1票...但是一旦设置了默认百分比，就可以继续投票......它应该向用户显示正在进行的投票投票....

SNIPPET

var entry_1=10;	//votes by default
var entry_2=20; //votes by default
var sum = entry_1 + entry_2; 


var PollDefaultSet =0;
	
$(".entry").on("click",function(){	

/*
if(PollDefaultSet ==0){
entry_1=entry_1;	
entry_2=entry_2;		
sum = entry_1 + entry_2; 
	PollDefaultSet =1;
	
}

if(PollDefaultSet ==1){}
*/


if($(this).hasClass("entry1")){
	 entry_1++; sum = (entry_1 + entry_2); 

}if($(this).hasClass("entry2")){	
	entry_2++;  sum = (entry_1 + entry_2); 
 
}




	var topP= Math.floor((entry_1/sum)*100);
	var mid0P= Math.floor((entry_2/sum)*100);

	
  var totalP = topP + mid0P;
	
	
	var total_op1= totalP -(mid0P);
	var total_op2= totalP -(topP);


	$(".entry1").find("b").text(total_op1+ "%"); 
	$(".entry2").find("b").text(total_op2+ "%"); 


	$(".total_votes span").text(sum);

	$(".entry1 .PollPercentageBG").animate({width: total_op1+"%"});
	$(".entry2 .PollPercentageBG").animate({width: total_op2+"%"});
	


	
}).click();

.ShowPollContainer{
	margin:10px auto;
	width:100%;
	overflow:hidden;
	border-bottom: 1px solid #E1E8ED;
}
.entry{
	margin:8px auto;
	position:relative;
	height:35px;
	line-height:35px;
	width:90%;
	qborder:1px solid #F0F0F0;
	overflow:hidden;
	cursor:pointer;
}
.entry .PollPercentageBG{
	display:block;
	height:100%;
	width:0;
	
	
		-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
	
}
.entry div{
	position:absolute;
	display:block;
	height:35px;
	line-height:35px;
	width:100%;
	text-align:left;
	qfont-weight:bold;
	padding-left:20px;
	top:0;bottom:0;left:0;right:0;
	z-index:9;
	

}
.entry b{
	position:absolute;
	display:block;
	height:35px;
	line-height:35px;
	width:auto;
	font-weight:bold;
	padding-left:10px;
	top:0px;
	right:0px;
	z-index:11;
	qbackground:red;
	padding:0 5px;
	text-align:center;
}
.entry .PollBase{
	position:absolute;
	display:block;
	height:35px;
	width:10px;
	top:0px;
	left:0px;
	z-index:12;
	qbackground:blue;

}

.entry .PollPercentageBG{
	max-width:80%;
}
.entry1 .PollPercentageBG{
	background:#5CA733; 
}
.entry1 .PollBase{
	background:#5CA733; 
}
.entry2 .PollPercentageBG{
	background:#FFC800;
}
.entry2 .PollBase{
	background:#FFC800;
}

.total_votes{text-align:left;margin:10px auto 20px auto;width:90%;color:#899AA7;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<div class='ShowPollContainer' >


<div class='entry entry1'>
<span class='PollPercentageBG'></span>
<div>First Option </div><b>0%</b><span class='PollBase'></span>
</div>


<div class='entry entry2'>
<span class='PollPercentageBG'></span>
<div>Second Option </div><b>0%</b><span class='PollBase'></span>
</div>
<div class='total_votes'> total votes <span>0</span> · </div>

</div>

Answer 1

如果您有多个浏览器参与投票，您将需要使用websockets来处理投票或类似websockets的事情，以便每个投票都传播到每个浏览器。

对于单个浏览器，您可以使用重构函数初始化值，而不是触发click方法来初始化字段：

var entry_1 = 10;
var entry_2 = 20;
var sum = entry_1 + entry_2;

var displayPercentages = function() {
    sum = (entry_1 + entry_2); 

    var topP = Math.floor((entry_1/sum)*100);
    var mid0P = Math.floor((entry_2/sum)*100);    

    var totalP = topP + mid0P;

    var total_op1= totalP -(mid0P);
    var total_op2= totalP -(topP);

    $(".entry1").find("b").text(total_op1+ "%"); 
    $(".entry2").find("b").text(total_op2+ "%"); 

    $(".total_votes span").text(sum);

    $(".entry1 .PollPercentageBG").animate({width: total_op1+"%"});
    $(".entry2 .PollPercentageBG").animate({width: total_op2+"%"});
}

displayPercentages();

$(".entry").on("click",function() {
    if($(this).hasClass("entry1")) {
        entry_1++;
    } else if($(this).hasClass("entry2")) { 
        entry_2++;
    }

    displayPercentages();
});