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