我有几个可排序的列表,我可以将元素拖到每个列表中。
设置如下所示:
<ul id="sortable1" class="connectedSortable">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ul id="sortable2" class="connectedSortable">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
JavaScript 很简单,看起来像这样
(以下示例来自 jQuery 网站)
<script>
$(function() {
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable"
}).disableSelection();
});
</script>
到目前为止,一切都很好...
问题:
对于 jQuery 选择器,我可以使用 ul 类而不是两个列表 ID 吗??
就像是:
<script>
$(function() {
$( ".connectedSortable" ).sortable({
connectWith: ".connectedSortable"
}).disableSelection();
});
</script>
这是正确的吗?
我试过这个,它有效......
...但我想知道为什么 jQuery 网站给出了两个列表 ID 作为选择器而不仅仅是类名的示例?如果我使用类作为选择器,我会遇到兼容性问题吗?
使用类名作为选择器的好处是我不必提前知道列表 ID,理论上可以动态创建新列表?
什么是最佳实践和“错误证明”?
非常感谢!
最佳答案
按类(class)选择是可以的,您的脚本是正确的。
在按类别选择元素时,我从未遇到任何兼容性问题。
使用类名的优点是不必指定要匹配的所有元素的 ID。它的缺点是如果在其他元素中错误地使用了该类,则可能匹配比您想要的更多的元素。
当按 ID 指定元素时,您确定只选择了您想要的元素。因此,当您确切地知道要匹配哪些 DOM 元素并且知道它们的 ID 时,它会很有用;正如您所注意到的,如果您即时创建元素,这可能是不可能的。
我认为在您的情况下,最佳实践是使用类名。不要在 CSS 中使用匹配的类名;如果它负责格式化,您(或您团队中的其他人)可能会忘记它提供的行为变化,并将其用于其他不相关的元素,仅用于格式化。这可能会导致错误。最好有单独的“行为”和“表示”类,在 CSS 中使用表示类,在 jQuery 中使用行为类来选择元素。
关于jquery-ui - jQuery 可排序选择器 ("id"与 "class")?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8034286/