4

我正在尝试将逗号分隔的列表注入到 DOM 中，用户可以将其复制并粘贴到另一个应用程序中。现在我完全被困在如何处理前面没有逗号的第一个元素上。

现在，用户单击一个元素，jquery 获取该元素的 ID 以构建列表。用户应该能够打开和关闭他们的选择。我还需要按照用户选择项目的顺序生成列表。

HTML

Comma separated list here: <span id="list"></span>
<br />
<a id="1" class="clickme" href="#"><li>One</li></a>
<a id="2" class="clickme" href="#"><li>Two</li></a>
<a id="3" class="clickme" href="#"><li>Three</li></a>
<a id="4" class="clickme" href="#"><li>Four</li></a>
<a id="5" class="clickme" href="#"><li>Five</li></a>
<a id="6" class="clickme" href="#"><li>Six</li></a>

CSS

.selected {
    background-color: #99CCFF;    
}

JS - 加载 jquery

$('.clickme').click(function (e) {
        e.preventDefault();
        var book_id = $(this).attr('id'); 
        $(this).children('li').toggleClass("selected");
        var list_container = $("#list");
        if ($(this).children('li').is(".selected")) {
            if (list_container.text().length > 0) {
                list_container.append("," + book_id);
            } else {
                list_container.append(book_id);
            }
        } else {
            list_container.text(list_container.text().replace("," + book_id, ""));          
        }
});

这非常适合构建逗号分隔的列表，并且非常适合关闭列表中除第一个值之外的所有值。问题是插入的第一个值没有前面的逗号，因此替换函数无法匹配它。如果我从替换函数中删除逗号，那么我会留下一堆不需要的逗号。如果我两者都匹配，那么我冒着匹配 ID 的一部分的风险......即在 3 关闭时替换 13 中的 3。

我尝试了很多变化，但找不到任何有效的方法。

产生预期结果的唯一解决方案是使用 CSS 注入逗号并用 span 元素包装注入的 ID。

CSS 技巧

#list span { display: inline; }
#list span:after { content: ","; }
#list span:last-child:after { content: ""; }

工作得很好......除了这个的实际目的。我需要用户能够复制和粘贴生成的字符串。当您使用 CSS 生成内容时，大多数浏览器中的 DOM 级剪贴板都看不到它。IE 复制了您在浏览器中看到的字符串，FF 和 Safari 都复制了没有附加 CSS 逗号的字符串。

小提琴在这里

4

2 回答 2

6

看来您已经使这个问题复杂化了。只需简单地制作一组选定的书籍 ID，然后将.join(',')它们显示为逗号分隔的列表。

$('.clickme').click(function (e) {
    e.preventDefault();
    $(this).children('li').toggleClass("selected");

    var list_container = $("#list");
    var book_ids = $('.clickme:has(li.selected)').map(function(){
        return this.id;
    }).get();

    list_container.text(book_ids.join(','));
});

演示：http: //jsfiddle.net/rYu6m/2/

编辑：你说你想保持元素被点击的顺序。在这种情况下，您需要在单击处理程序之外声明该数组，然后.push将元素添加到它或.splice将其取出。使用数组比使用字符串要容易得多。

var book_ids = [];
$('.clickme').click(function (e) {
    e.preventDefault();
    $(this).children('li').toggleClass("selected");

    var list_container = $("#list");

    var index = $.inArray(this.id, book_ids);
    if(index === -1){
        // Not in array, add it
        book_ids.push(this.id);
    }
    else{
        // In the array, remove it
        book_ids.splice(index, 1);
    }

    list_container.text(book_ids.join(','));
});

演示：http: //jsfiddle.net/rYu6m/4/

于 2013-04-04T20:46:17.120 回答
2

Rocket Hazmat 的解决方案非常相似，可能更好，但我还是会发布我的：

$('.clickme').click(function (e) {
    e.preventDefault();
    $(this).toggleClass('selected');
    var l = [];
    $('.selected').each(function(){
        l.push($(this).attr('id'));
    });
    $('#list').text(l.join(','));
});

http://jsfiddle.net/rYu6m/3/

于 2013-04-04T20:51:00.830 回答