我有一个由 JSViews 模板生成的照片库,带有一个赞成和反对按钮。OnClick 触发数据库更新以增加基础分数。我还需要增加页面中呈现的 HTML 中的 Score 字段,使其与数据库中的新值保持一致。
下面的代码是我的第一次尝试,但它不起作用。我怎么能做到这一点?
<script type="text/x-jsrender" id="gallerycat1">
{{for List}}
<ul>
<li data-type="media" data-url="{{:MainImage}}"></li>
<li data-thumbnail-path="{{:Thumbnail}}"></li>
<li data-thumbnail-text>
<p data-link="Score" class="largeLabel"><span id="span-a-{{:ProfileId}}">{{:Score}}</span> {{:FirstName}} {{:LastName}}, {{:Company}}</p>
<p class="smallLabel">Click to vote.</p>
</li>
<li data-info="">
<div class="voting-buttons">
<a href="#" data-link="Score" onclick="upVote('<%= userVoted%>',{{:[ImageId]}},1);">
<img width="30" src="/client/images_webdev/buttons/heart.png" alt="Upvote this" />
</a>
<a href="#" data-link="Score" onclick="downVote('<%= userVoted%>',{{:[ImageId]}},0);">
<img data-link="Score" width="30" src="/client/images_webdev/buttons/thumbs.png" alt="Downvote this" />
</a>
</div>
<p class="mediaDescriptionHeader"><span data-link="Score" id="scorem">{^{:Score}}</span> {{:FirstName}} {{:LastName}}, {{:Company}}</p>
</li>
</ul>
{{/for}}
</script>
这是用于投票的 onClick 事件
function castVote(userVoted, imageId, vote) {
jQuery.ajax({
url: '/client/webservice/voting.asmx/InsertVote',
type: "POST",
data: "{'userVoted':'" + userVoted + "','imageId':" + imageId + ",'vote':" + vote + "}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
if (response.d == 'True') {
var counter = jQuery('#scorem').text();
if (vote > 0) {
counter++;
} else {
counter--;
}
jQuery('#scorem').text(counter);
upVoteConfirm();
} else {
downVoteConfirm();
}
}
});