[英]Bootstrap Voting button not working
我的页面中有一个投票系统,在该系统中,我使用了正常的css按钮,效果很好。 但是当我在Bootstrap按钮中应用它时,它不起作用。
我想在Bootstrap中使用它。
普通的CSS按钮:
<div class="voting_kochi" id="1012">
<div class="voting_btn"><div class="up_button"> </div><span class="up_votes">0</span></div>
<div class="voting_btn"><div class="down_button"> </div><span class="down_votes">0</span></div>
</div>
转换为Bootstrap:
<div class="voting_kochi" id="1012">
<div class="voting_btn"><div class="btn btn-default btn-responsive up_button"><span class="glyphicon glyphicon-thumbs-up"></span></div><span class="badge btn-responsive up_votes">0</span></div>
<div class="voting_btn"><div class="btn btn-default btn-responsive down_button"><span class="glyphicon glyphicon-thumbs-down"></span></div><span class="badge btn-responsive down_votes">0</span></div>
</div>
脚本:
$(document).ready(function() {
$.each( $('.voting_kochi'), function(){
var unique_id = $(this).attr("id");
post_data = {'unique_id':unique_id, 'vote':'fetch'};
$.post('../vote_process.php', post_data, function(response) {
$('#'+unique_id+' .up_votes').text(response.vote_up);
$('#'+unique_id+' .down_votes').text(response.vote_down);
},'json');
});
$(".voting_kochi .voting_btn").click(function (e) {
var clicked_button = $(this).children().attr('class');
var unique_id = $(this).parent().attr("id");
if(clicked_button==='down_button') //user disliked the content
{
post_data = {'unique_id':unique_id, 'vote':'down'};
$.post('../vote_process.php', post_data, function(data) {
$('#'+unique_id+' .down_votes').text(data);
}).fail(function(err) {
alert(err.statusText);
});
}
else if(clicked_button==='up_button') //user liked the content
{
post_data = {'unique_id':unique_id, 'vote':'up'};
$.post('../vote_process.php', post_data, function(data) {
$('#'+unique_id+' .up_votes').text(data);
}).fail(function(err) {
alert(err.statusText);
});
}
});
});
使用hasClass()。hasClass将检查元素中某个类的存在。
$(".voting_kochi .voting_btn").click(function (e) {
var clicked_button = $(this).children();
var unique_id = $(this).parent().attr("id");
if($(clicked_button).hasClass('down_button')) //user disliked the content
{
post_data = {'unique_id':unique_id, 'vote':'down'};
$.post('../vote_process.php', post_data, function(data) {
$('#'+unique_id+' .down_votes').text(data);
}).fail(function(err) {
alert(err.statusText);
});
}
else if($(clicked_button).hasClass('up_button')) //user liked the content
{
post_data = {'unique_id':unique_id, 'vote':'up'};
$.post('../vote_process.php', post_data, function(data) {
$('#'+unique_id+' .up_votes').text(data);
}).fail(function(err) {
alert(err.statusText);
});
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.