2014-10-26 55 views
1

我想創建一個簡單的投票/投票程序與JavaScript,我試圖運行它在xammp,看看它是否需要在沒有成功的web服務器上執行。我是否需要包含除jQuery之類的vote.js之外的任何腳本js文件?我不確定。javascript是不會運行的

有人可以幫助謝謝。

HTML

<!DOCTYPE html> 
<html> 

<head> 
<title>Vote</title> 
<link rel="stylesheet" type="text/css" href="style.css"> 
<script src="vote.js"></script> 
</head> 

<body> 
<div class="content"> 
    <h3 class="title">Who's better ?</h3> 
<ul> 
    <li class="option" id="option_1"> 
     Messi 

     <p class="score" id="score_1">0</p> 

     <div class="progressbar"> 
     </div> 
    </li> 

    <li class="option" id="option_2"> 
     Ronaldo 

     <p class="score" id="score_2">0</p> 

     <div class="progressbar"> 
     </div> 
    </li> 
    </ul> 
    </div> 
</body> 
</html> 

CSS

.content { 
background-color: #5C5C5C; 
height: 500px; 
width: 600px; 
font-family: CorpidRegular,Arial,Helvetica,sans-serif; 
color: #fff; 
font-weight: normal; 
font-size: 1.5rem; 
} 
.progressbar_1 { 
width: 400px; 
border-radius: 0px; 
margin-left: 100px; 
} 
.progressbar_2 { 
width: 400px; 
border-radius: 0px; 
margin-left: 100px; 
} 

h3{  
text-align: center; 
padding: 40px; 
margin: 0px; 
font-weight: normal; 
} 
ul{ 
list-style-type: none; 
display: inline; 
padding: 0px; 
} 
.option:first-child { 
background: blue; 
} 
.option { 
background: black; 
} 
li{ 
margin: 0px; 
padding: 0px; 
text-align: center; 
color: #fff; 
cursor: pointer; 
} 
li:hover { 
color: yellow; 
} 

JS

var totalVotes = 0; 

$('.option').click(function() { 
var $this = $(this); 

// store voting value in data-voting 
if (!$this.data('voting')) 
    $this.data('voting', 0); 

var voting = parseInt($this.data('voting'), 10); 
voting++; 
totalVotes++; 

$this.data('voting', voting); 

updateProgressBars(); 
}); 

function updateProgressBars() 
{ 
$('.option').each(function() 
    { 
    var $this = $(this); 
    var voting = parseInt($(this).data('voting'), 10); 
    var pct = Math.round((voting/totalVotes) * 100); 

    if (isNaN(voting)) voting = 0; 
    if (isNaN(pct)) pct = 0; 

    $this.find('progressbar').progressbar({value: pct}); 
    $this.find('.score').html(voting + ' of ' + totalVotes + ' (' + pct + '%)'); 
    }); 
} 
+4

,你需要在yo中包含jQuery腳本你需要在包含'vote.js'之前包含它。 – jfriend00 2014-10-26 20:48:18

+0

謝謝,我剛剛從網站中包含了最新的jQuery。這是我如何實現它[「」]。它仍然不起作用。 – tb1000 2014-10-26 20:53:15

+1

總是在您的瀏覽器錯誤控制檯或調試控制檯查看腳本錯誤。 – jfriend00 2014-10-26 20:56:39

回答

-2

你只是接近HTML標籤,didin't由於您使用jQuery庫函數打開標籤

+2

wat – 2014-10-26 21:03:58