1

私は画像付きのウェブサイトを持っています。

各画像では、お気に入りのアイコンの上にマウスが 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からスタイルを追加して、「お気に入りに追加」の背景をオーバーライドできます。

jsフィドル

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 に答える