jquery - 单击更改列表图像项

Question

我有一个包含定义的list-style-image 和悬停 的列表，因此每次用户浏览该列表时，图像都会发生变化。

没关系。我想做的是，当用户点击该元素时，点击的元素会相应地更改为另一个图像，无论是否选择。

到目前为止，这是我的代码:JSFiddle

CSS

#FavListApp {
    list-style-image: url('../images/FavStarUnSel.png');
    list-style-position: inside;
    cursor: pointer;
}

ul li:hover { list-style-image: url('../images/FavStarSel.png'); }

HTML

<ul id="FavListApp">

    <li style="margin-bottom:20px;"><a href="#">Dragon App</a></li>
    <li style="margin-bottom:20px;"><a href="#">Calculator</a></li>
    <li style="margin-bottom:20px;"><a href="#">Brain Academy</a></li>
    <li style="margin-bottom:20px;"><a href="#">Root Words</a></li>
</ul>

JQUERY

$(document).ready(function() {

            $('#FavListApp li > a').click(function(){

                $(this).parent().find('#FavListApp').css('listStyleImage','url(../images/FavStarUnSel.png)')
            });
        });

Answer 1

我的建议

FIDDLE

$('#FavListApp li > a').on("click",function (e) {
  e.preventDefault();
  $link = $(this);
  $link.toggleClass("selected");
  $link.parent().css('listStyleImage', $link.hasClass("selected")?sel:unsel);
});