开发者问题收集

Twitter bootstrap 图标和 <input type="button>

2015-07-03
138

我尝试放置两个图标来表示赞成/反对,但我不确定具体该怎么做。当前代码只有两个 <input type="button"> ,现在需要在它们上面放置图标。这是我目前尝试的:

<div class="btn-votes">
    <div class="like">
        <i class="icon-like"> 
            <input type="button" title="Up" class="up" onClick="addVote('.$row['image_id'].',\'1\')" '.$up.' />
        </i>
    </div>
    <div class="dislike">
        <i class="icon-dislike">
             <input type="button" title="Down" class="down" onClick="addVote('.$row['image_id'].',\'-1\')" '.$down.' />
        </i>
    </div>
</div>

这是 AJAX 部分。

function addVote(image_id,vote_rank) {
    $.ajax({
        url: "add_vote.php",
        data:'image_id='+image_id+'&vote_rank='+vote_rank,
        type: "POST",
    beforeSend: function(){
        $('#links-'+image_id+' .btn-votes').html("<img src='img/loaderIcon.gif' />");
    },
    success: function(vote_rank_status){
        var votes = parseInt($('#votes-'+image_id).val());
        var vote_rank_status;
        switch(vote_rank) {
            case "1":
            votes = votes+1;
            break;
            case "-1":
            votes = votes-1;
            break;
    }
       console.log(vote_rank_status);
    $('#votes-'+image_id).val(votes);
    $('#vote_rank_status-'+image_id).val(vote_rank_status);

        var up,down;

        if(vote_rank_status == 1) {
            up="disabled";
            down="enabled";
        }
        if(vote_rank_status == -1) {
            up="enabled";
            down="disabled";

        }    

        var vote_button_html = '<input type="button" title="Up" id="up" onClick="addVote('+image_id+',\'1\')" '+up+' /><div class="label-votes">'+votes+'</div><input type="button" title="Down" id="down"  onClick="addVote('+image_id+',\'-1\')" '+down+' />';    
            $('#links-'+image_id+' .btn-votes').html(vote_button_html);
        }


    });
    }

我不确定问题出在哪里,但在 Web 控制台中我看到错误

ReferenceError: addVote is not defined

我认为这意味着无法将 onClick 事件传递给 AJAX 函数。那么这些按钮应该如何?

这是当前运行良好的 HTML

<div class="btn-votes">
    <input type="button" title="Up" class="up" onClick="addVote('.$row['image_id'].',\'1\')" '.$up.' />
    <input type="button" title="Down" class="down" onClick="addVote('.$row['image_id'].',\'-1\')" '.$down.' />  
</div>

更新:当前代码

<div class="btn-votes">
    <div class="like">
         <button title="Up" class="up" onClick="addVote('.$row['image_id'].',\'1\')" '.$up.' />
               <i class="icon-like"> </i>
         </button>
    </div>
    <div class="dislike">                                  
          <button title="Down" class="down" onClick="addVote('.$row['image_id'].',\'-1\')" '.$down.' />
               <i class="icon-dislike"></i>
          </button>
    </div>
</div>
2个回答

您可以在按钮上绑定 onclick 事件,但是,您应该通过 jquery 绑定函数,而不是通过 onclick,因为 onclick 将在您的函数范围之外触发​​:

var vote_button_html = '<div class="like">' +
                           '<i class="icon-like">' +
                               '<input type="button" title="Up" id="up" '+up+' />' +
                            '</i>' + 
                       '</div>' +
                       '<div class="label-votes">'+votes+'</div>' +
                       '<div class="dislike">' +
                           '<i class="icon-dislike">' +
                               '<input type="button" title="Down" id="down" '+down+' />' +
                           '</i>' + 
                       '</div>';    

var vote_button = $(vote_button_html);

vote_button.find("#up").on("click", function(){
    addVote(image_id,1);
});
vote_button.find("#down").on("click", function(){
    addVote(image_id,-1);
});

$('#links-'+image_id+' .btn-votes ').empty().append(vote_button);

请注意,如果您的页面上有多个投票按钮,您 必须 将 id 从 id 上下更改为 class 作为 id 必须是唯一的

Remy Grandin
2015-07-03

首先,addVote() 函数不存在,因此请将您的 ajax 调用包装在其中。

function addVote(image_id, vote_rank) {
    $.ajax({
    url: "add_vote.php",
    data:'image_id='+image_id+'&vote_rank='+vote_rank,
    type: "POST",        
    beforeSend: function(){
        $('#links-'+image_id+' .btn-votes').html("<img src='loaderIcon.gif' />");
    },

    success: function(vote_rank_status){
         console.log(vote_rank_status);
    var votes = parseInt($('#votes-'+image_id).val());
    var vote_rank_status;
    switch(vote_rank) {
        case "1":
        votes = votes+1;
        break;
        case "-1":
        votes = votes-1;
        break;

    }
    $('#votes-'+image_id).val(votes);
    $('#vote_rank_status-'+image_id).val(vote_rank_status);

    var up,down;

    if(vote_rank_status == 1) {
        up="disabled";
        down="enabled";
    }
    if(vote_rank_status == -1) {
        up="enabled";
        down="disabled";
    }   
    var vote_button_html = '<div class="like"><i class="icon-like"><input type="button" title="Up" id="up" onClick="addVote('+image_id+',\'1\')" '+up+' /></i></div><div class="label-votes">'+votes+'</div><div class="dislike"><i class="icon-dislike"><input type="button" title="Down" id="down"  onClick="addVote('+image_id+',\'-1\')" '+down+' /></i></div>';    
    $('#links-'+image_id+' .btn-votes ').html(vote_button_html);
    }
    });
}

然后,不要使用 <input type="button" /> ,而是使用 <button></button> ,并将图标放在里面。

<button class="btn" onClick="addVote(id, rank)">
    <i class="fa fa-send"></i>
</button>

如果您已经在使用 jquery,您可能想要删除 onclick 并执行以下操作:

$('body').on('click', '.up, .down', function(e){
    e.preventDefault();
    addVote($(this).attr('data-id'), $(this).attr('data-rank'));
    return false;
});

当然,还要在 data 属性中回显 php。

Charleshaa
2015-07-03