1

我有一个带有图像的网站。

在每个图像上，一个鼠标悬停在可见的收藏图标上。

如果用户单击它，它将被添加到他们的收藏夹中：

 $.post("favoriet.php", { aid: aid } );

默认情况下，添加到收藏夹图标具有以下 css

.imgContainer div:hover a,
.imgContainer div:focus a 
{
background: url(/media/img/favourit25.PNG);
}

但如果用户点击了收藏，则图像必须更改为 delete.PNG

无需刷新页面。

有什么办法我可以做到这一点？

外观示例：http: //jsfiddle.net/9auEQ/4/

如果单击，我想更改左上角的图片

如果我使用

function toevoegenFavo(aid) 
{       
    alert("the picture is added.");
    $.post("favoriet.php", { aid: aid } );
    $('.imgContainer').toggleClass('fav');
}

toggleClass 有效并且所有图像都发生了变化（而不是我点击的只有 1 个）

<script>
$('.imgContainer').click(function () {
$(this).toggleClass('fav');
});
 </script>

不要为我做任何事情。

4

1 回答 1

2

您可以切换您的课程.imgContainer，然后添加样式以覆盖“添加到收藏夹”背景。

jsFiddle

JS

$('.imgContainer').click(function () {
    $(this).toggleClass('fav');
});

CSS

.imgContainer.fav div:hover a,
.imgContainer.fav div:focus a {
    background: url(http://www.letsgomobile.org/images/reviews/0102/samsung-camera-phone-test-pictures.jpg);

}
于 2013-03-25T12:34:45.493 回答