我正在制作一个错误报告处理系统，我正在尝试使用 jQuery UI .selectable获取用户单击的所有报告，但报告根据它们来自的系统分组在列表中。可以同时选择多个列表。
在链接的演示中，我目前只是打印出 ID，这对于单个列表来说效果很好。但是，当我从两个或多个不同的列表中选择元素时，已经列出的 ID 会消失。在 .selectable 的眼中，它们似乎仍处于选中状态，但不再打印。 每次我点击不同的列表时，以前的 ID 都会消失，新的会出现。
有人知道我可以做什么来打印所有内容吗？
此外，如果给定应该选择的值的字符串/数组，是否有任何方法可以将 .ui-selected 类应用于元素？基本上，与此脚本的功能相反。 (如果这有任何意义......？)
JSFiddle 在这里:http://jsfiddle.net/Kantana/Z3SBU/1/
Javascript
$(function() {
$(".selectable").bind("mousedown", function(event) {
event.metaKey = true;
}).selectable({
stop: function() {
var result = $("#selectedItems").empty();
$(".ui-selected", this).each(function() {
var itemId = $(this).attr('id');
var item = itemId.replace("report_", "");
result.append(" #" + item);
});
}
});
})
CSS
这个例子主要使用了 Twitter Bootstrap CSS。
HTML
<span id="selectedItems">None selected</span>
<div class="accordion" id="accordion2">
<div class='accordion-group'>
<div class='accordion-heading'><a class='accordion-toggle collapsed' data-toggle='collapse' data-parent='#accordion2' href='#1'>System 1 - All responding</a>
</div>
<div id='1' class='accordion-body collapse'>
<div class='accordion-inner'>
<ol class='selectable'>
<li class='report file ui-widget-content' id='report_60'>
Error #60 - Responding
<p class='tinytext'>Check type: ping</p>
<p class='tinytext'>Error message: unconfirmed_down</p>
</li>
</ol>
</div>
</div>
</div>
<div class='accordion-group'>
<div class='accordion-heading'><a class='accordion-toggle collapsed' data-toggle='collapse' data-parent='#accordion2' href='#2'>System 2 - All responding</a>
</div>
<div id='2' class='accordion-body collapse'>
<div class='accordion-inner'>
<ol class='selectable'>
<li class='report file ui-widget-content' id='report_62'>
Error #62 - Responding
<p class='tinytext'>Check type: ping</p>
<p class='tinytext'>Error message: unconfirmed_down</p>
</li>
</ol>
</div>
</div>
</div>
<div class='accordion-group'>
<div class='accordion-heading'><a class='accordion-toggle collapsed' data-toggle='collapse' data-parent='#accordion2' href='#3'>System 3 - All responding</a>
</div>
<div id='3' class='accordion-body collapse'>
<div class='accordion-inner'>
<ol class='selectable'>
<li class='report file ui-widget-content' id='report_56'>
Error #56 - Responding
<p class='tinytext'>Check type: Free Memory</p>
<p class='tinytext'>Error message: CHECK_NRPE: Socket timeout after 20 seconds.</p>
<li class='report file ui-widget-content' id='report_57'>
Error #57 - Responding
<p class='tinytext'>Check type: SSH</p>
<p class='tinytext'>Error message: CRITICAL - Socket timeout after 10 seconds</p>
<li class='report file ui-widget-content' id='report_55'>
Error #55 - Responding
<p class='tinytext'>Check type: ping</p>
<p class='tinytext'>Error message: PING CRITICAL - Packet loss = 100%</p>
<li class='report file ui-widget-content' id='report_54'>
Error #54 - Responding
<p class='tinytext'>Check type: Free Space All Disks</p>
<p class='tinytext'>Error message: CHECK_NRPE: Socket timeout after 20 seconds.</p>
<li class='report file ui-widget-content' id='report_58'>
Error #58 - Responding
<p class='tinytext'>Check type: Load Average</p>
<p class='tinytext'>Error message: CHECK_NRPE: Socket timeout after 20 seconds.</p>
</li>
</ol>
</div>
</div>
</div>
<div class='accordion-group'>
<div class='accordion-heading'><a class='accordion-toggle collapsed' data-toggle='collapse' data-parent='#accordion2' href='#4'>System 4 - 1 error</a>
</div>
<div id='4' class='accordion-body collapse'>
<div class='accordion-inner'>
<ol class='selectable'>
<li class='report file ui-widget-content' id='report_59'>
Error #59 - Warning
<p class='tinytext'>Check type: ping</p>
<p class='tinytext'>Error message: unknown</p>
</li>
</ol>
</div>
</div>
</div>
<div class='accordion-group'>
<div class='accordion-heading'><a class='accordion-toggle collapsed' data-toggle='collapse' data-parent='#accordion2' href='#5'>System 5 - 1 error</a>
</div>
<div id='5' class='accordion-body collapse'>
<div class='accordion-inner'>
<ol class='selectable'>
<li class='report file ui-widget-content' id='report_61'>
Error #61 - Warning
<p class='tinytext'>Check type: Free Space All Disks</p>
<p class='tinytext'>Error message: DISK WARNING - free space: / 11230 MB (15% inode=78%): /dev 989 MB (99% inode=99%): /run 398 MB (99% inode=99%): /run/lock 5 MB (100% inode=99%): /run/shm 997 MB (100% inode=99%):</p>
</li>
</ol>
</div>
</div>
</div>
</div>
最佳答案
更改停止功能的范围选择整个 Accordion 中的 ui-selected 元素。指定 $(".ui-selected", this) 仅查看所选的单个元素，因为它包含对可选项的引用。
stop: function() {
var result = $("#selectedItems").empty();
//changed from this to #accordion
$(".ui-selected", $("#accordion2")).each(function() {
var itemId = $(this).attr('id');
var item = itemId.replace("report_", "");
result.append(" #" + item);
});
}
关于css - jQuery UI - 多个序列化的 .selectable 列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16078066/