让我的.toggleClass工作有点麻烦。我是javascript的新手,所以请原谅我,如果我错过了一些非常简单的东西。我希望用户能够喜欢图像和帖子等内容。我有一个小心脏图标,点击它应该变成红色/黑色取决于他们是否添加/删除。一切都与.toggleClass不同。谁能指出我哪里错了?
index.php
<div class="heart-box">
<?php
//Check if user has fav'd the image..
$hasFav = db::getInstance()->query("SELECT * FROM favourites WHERE userID = ? AND img_id = ?", array($the_user, $img_id));
$action = $hasFav->results() ? 'unfav-heart' : 'fav-heart';
?>
<div class="<?php echo $action; ?> fa fa-heart" id="<?php echo $img_id; ?>" ></div>
</div>
脚本
$(document).ready(function(){
//add to favourites...
$('.fav-heart').click(function(){
var img_id = $(this).attr('id');
$.ajax({
url: 'favourites.php',
type: 'post',
async: false,
data:{
'fav' : img_id
},
success:function(){
$(img_id).toggleClass("unfav-heart");
}
});
});
// remove from favourites...
$('.unfav-heart').click(function(){
var img_id = $(this).attr('id');
$.ajax({
url: 'favourites.php',
type: 'post',
async: false,
data:{
'fav' : img_id
},
success:function(){
$(img_id).toggleClass("fav-heart");
}
});
});
});
答案 0 :(得分:3)
正如在另一个答案中指出的那样,您省略了#
前缀以指示选择器中的ID。但是根本不需要使用选择器,因为你有一个直接指向元素的变量。
$('.fav-heart').click(function(){
var img = $(this);
var img_id = this.id;
$.ajax({
url: 'favourites.php',
type: 'post',
async: false,
data:{
'fav' : img_id
},
success:function(){
img.toggleClass("unfav-heart");
}
});
});
答案 1 :(得分:2)
JQuery id在选择器中需要#:
$(document).ready(function(){
//add to favourites...
$('.fav-heart').click(function(){
var img_id = $(this).attr('id');
$.ajax({
url: 'favourites.php',
type: 'post',
async: false,
data:{
'fav' : img_id
},
success:function(){
$("#"+img_id).toggleClass("unfav-heart");
}
});
});
// remove from favourites...
$('.unfav-heart').click(function(){
var img_id = $(this).attr('id');
$.ajax({
url: 'favourites.php',
type: 'post',
async: false,
data:{
'fav' : img_id
},
success:function(){
$("#"+img_id).toggleClass("fav-heart");
}
});
});
});
答案 2 :(得分:1)
两个选择器的点击处理程序都已在文档就绪中注册。这就是为什么只有匹配选择器类的元素才会被分配给单击处理程序。如果您之后切换课程,则必须重新分配点击处理程序。
更好的方法是为所有心脏元素注册一个点击处理程序。在click处理程序中,您可以执行switch case语句,在其中相应地切换类。