Question

＆lt; p＆gt;我试图把两个图标用于投票/投票，但我不确定如何做到这一点。当前代码有两个＆lt; code＆gt;＆lt; input type =“button”＆gt; <=“”code =“”/>现在需要在它们上面添加图标。这是我到目前为止所尝试的：

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


    });
    }

我不确定问题出在哪里但在网络控制台中我看到了错误

ReferenceError：未定义addVote

我认为这意味着无法将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>

Answer 1

首先，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。

Answer 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更改为类，因为ID 必须独一无二

Twitter引导程序图标和<input type =“button＆gt;

2 个答案: