Jquery 推特引导图标和<；输入类型="；按钮>；

我试着为投票添加两个图标，但我不确定具体怎么做。当前代码只有两个

，现在需要在它们上面放置图标。这就是我目前尝试的：

<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>

更新：当前代码

<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>

首先，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);
    }
    });
}

---

当然，您可以在按钮上绑定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);

var投票按钮html=''+
'' +
'' +
'' + 
'' +
“+投票数+”+
'' +
'' +
'' +
'' + 
'';    
var vote_button=$（vote_button_html）；
投票按钮。查找（#up”）。在（“单击”，函数（）上{
addVote（图像_id，1）；
});
投票按钮。查找（#向下”）。在（“单击”，函数（）上{
addVote（图像_id，-1）；
});
$（“#链接-”+image_id+“.btn投票”）.empty（）.append（投票按钮）；

---

请注意，如果页面上有多个投票按钮，则必须将id从id向上和向下更改为类，因为id必须是唯一的

要将图标放入按钮，请使用

按钮

元素，而不是

输入类型=“button”

。其次，您的代码中没有定义

addVote（）

函数，因此出现了错误。感谢您的评论。我添加了当前代码，该代码正在运行，并且没有

addVote

。谢谢。我已经更新了我的问题，在你的回答之后我是如何提出这些问题的。但还是一样。我有

函数addVote（image\u id，vote\u rank）{…

我只是没有为这个问题复制它。我的错误。你的

addVote（）在哪里

函数位于哪里？你应该在任何范围之外声明它。我在问题中添加了完整的原始

vote.js

文件。我在文件中包含

vote.js

，按钮在哪里。我对js/ajax非常陌生，不知道怎么做。这应该放在页面的头部吗？

$（'body'）。on（'click'、'.up、.down'，function（e）{…

您需要将其放在

$（文档）中。ready（）

函数。

addVote（）

应该位于该函数之外或

.on（）旁边）

event listener。您也可以删除addVote函数并将ajax调用放入侦听器中。我想这是针对

.js

文件的，ajax函数在哪里？我只有一个地方有这些按钮。是的，在

var vote\u button\u html=''+投票+''；$（'.\35;链接-'+图像id+'.btn投票'）.html）的位置（vote_button_html）

控制台中存在相同的错误。我还看到您将

onClick

放在

up

按钮上，但没有

onClick

放在down按钮上。这是为什么？如果仍然存在错误，您的addVote函数在哪里？是的，仍然存在此错误。我在问题中添加了完整的

vote.js

原始文件。

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

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

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

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