Question

如果没有跨度，我试图将子弹添加到所选类的li中。截至目前，每次点击链接时都会添加一个项目符号。添加和删除项目符号的最佳方法是什么，而不是每次点击都添加项目符号？

HTML

<ul class="files-list">
    <li class="selected">
        <span>•</span>
        "12-0001.hello-world.html"
    </li>
    <li>12-0002.hello-world.html</li>
</ul>

JS

$(this).prepend($('<span />').html('&bull;')).addClass('selected').siblings().removeClass('selected').find('span').remove();

Answer 1

为什么不尝试纯CSS解决方案？

.files-list {
  list-style: none;
}

.selected {
  list-style: disc;
}

然后您只需要切换.selected类。

$('.files-list > li').click(function () {
  $(this).toggleClass('selected');
})

Answer 2

添加检查条件

var $this = $(this);
if( !$this.find('span').length){
   // Your code here
}

完整代码

$('li').on('click', function() {
    var $this = $(this);
    if (!$this.find('span').length) {
        $this.prepend($('<span/>').html('&bull;'))
            .addClass('selected')
            .siblings()
            .removeClass('selected')
            .find('span').remove();
    }
});

<强> Check Fiddle

仅在没有span元素的情况下，才在span元素中添加项目符号

2 个答案: