我正在尝试将逗号分隔的列表注入(inject)到 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 注入(inject)逗号并用 span 元素包装注入(inject)的 ID。
CSS 技巧
#list span { display: inline; }
#list span:after { content: ","; }
#list span:last-child:after { content: ""; }
效果很好...除了实际目的之外。我需要用户能够复制并粘贴生成的字符串。当您使用 CSS 生成内容时,大多数浏览器中的 DOM 级别剪贴板看不到它。 IE 复制了您在浏览器中看到的字符串,FF 和 Safari 都复制了没有 CSS 附加逗号的字符串。
最佳答案
看来你把这个问题复杂化了。只需简单地创建一个选定书籍 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(','));
});
关于jquery - 使用 jquery 创建一个逗号分隔的单击元素列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15821268/