Question

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

没关系。我想要做的是，当用户点击该项目时，被点击的项目会相应地更改为另一个图像。

到目前为止，这是我的代码：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);
});

Answer 2

在此上下文中使用closest

$('#FavListApp li > a').click(function(){
  $(this).closest('li').css('listStyleImage','url(../images/FavStarUnSel.png)')
});

Answer 3

这个怎么样：

（编辑：添加切换）

var selectedImage = 'url(../images/FavStarSel.png)'
var unselectedImage = 'url(../images/FavStarUnSel.png)'

$('#FavListApp li > a').click(function(){
  //Remember current state
  var li = $(this).parent()
  var currentImage = li.css('listStyleImage')    

  //Revert all items to default image
  $("#FavListApp li").css("list-style-image", unselectedImage);

  //Toggle current selected li image
  if (currentImage === selectedImage){
      li.css('listStyleImage', unselectedImage)
  }
  else{
      li.css('listStyleImage', selectedImage)
  }
});

Answer 4

哦，只是想到了一个CSS技巧。

基本上，你的链接只有一个＆＃34;＃＆＃34; href，为什么不把它们指向一个ID（即使它不存在？）

龙应用计算器脑科学院根词

然后编写CSS :active属性

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

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

单击更改列表图像项

4 个答案: