Twitter引导程序图标和<input type =“ button>

debugcn 发表于 Dev

用户5035451

我正在尝试放置两个图标以进行投票/投票，但是我不确定如何准确地做到这一点。当前代码只有两个，<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

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

人头马格兰丁

您可以在按钮上绑定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必须是唯一的

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。