Question

我有一个带图片的网站。

在每张图片上，只有一个鼠标悬停在可见的图标上。

如果用户点击它，它将被添加到他们喜欢的地方：

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

默认情况下，添加到favourit图标具有以下css

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

但如果用户点击了favourit，则图片必须更改为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>

dosp为我做了一件事。

Answer 1

您可以在.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);

}

更改背景*无需刷新

1 个答案: