javascript - Bootstrap 投票按钮不起作用

Question

我的页面中有一个投票系统，我将它与普通的 CSS 按钮一起使用，效果很好。但是当我将它应用到 Bootstrap 按钮时，它不起作用。

我想在 Bootstrap 中使用它。

普通 css 按钮:

<div class="voting_kochi" id="1012">

    <div class="voting_btn"><div class="up_button">&nbsp;</div><span class="up_votes">0</span></div>
    <div class="voting_btn"><div class="down_button">&nbsp;</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); 
        });
    }
});
});

Answer 1

使用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); 
        });
    }
});