jquery - 仅当没有 span 元素时才在 span 元素中添加项目符号

Question

如果没有跨度，我正在尝试将项目符号添加到所选类的 li 中。到目前为止，每次单击链接时都会添加一个项目符号。添加和删​​除项目符号而不是每次单击时都继续添加项目符号的最佳方法是什么？

HTML

<ul class="files-list">
    <li class="selected">
        <span>•&lt;/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();
    }
});​

检查小提琴