javascript将不会运行_Javascript_Jquery_Html_Css

javascript将不会运行

javascript jquery html css

javascript将不会运行,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我试图用javascript创建一个简单的投票/投票程序，我尝试在xammp上运行它，看看是否需要在web服务器上执行，但没有成功。除了vote.js（如jquery或其他）之外，我还需要包含任何脚本js文件吗？我不确定有人能帮忙吗？谢谢 html js 您只关闭html标记，而不打开标记，因为您使用的是jQuery库函数，您确实需要在页面中包含jQuery脚本，并且需要在投票前包含该脚本。js包含在内。谢谢，我刚刚从网站中包含了最新的jQuery。这就是我实现它的方式[“”]。它仍然不起作用

我试图用javascript创建一个简单的投票/投票程序，我尝试在xammp上运行它，看看是否需要在web服务器上执行，但没有成功。除了vote.js（如jquery或其他）之外，我还需要包含任何脚本js文件吗？我不确定

有人能帮忙吗？谢谢

html

您只关闭html标记，而不打开标记

，因为您使用的是jQuery库函数，您确实需要在页面中包含jQuery脚本，并且需要在投票前包含该脚本。js包含在内。谢谢，我刚刚从网站中包含了最新的jQuery。这就是我实现它的方式[“”]。它仍然不起作用。请始终在浏览器错误控制台或调试控制台中查找脚本错误。我在jQuery代码中看到$this.data（'voting'），但在HTML代码中的任何位置都没有看到“voting”作为数据属性。@Ashish

.data

访问jQuery的内部存储和数据-*属性。您可以在

中看到$this.data（'voting'，0）零存储在投票中。
<!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>

.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;
}

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 + '%)');
    });
}