Question

我有几个可排序的列表，我可以将元素拖到每个列表中。

设置看起来像这样：

<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，理论上可以动态创建新列表？

什么是最佳做法和“错误证明”？

非常感谢！

Answer 1

按类选择是正确的，您的脚本是正确的。

在按类选择元素时，我从未遇到任何兼容性问题。

使用类名具有不必指定要匹配的所有元素的ID的冒险。如果在其他元素中错误地使用了类，那么它的缺点就是可以匹配比你想要的元素更多的元素。

按ID指定元素时，您确定只选择了您想要的元素。因此，当您确切地知道要匹配哪些DOM元素并且知道它们的ID时，它会很有用;正如你所注意到的，如果你动态创建元素，这是不可能的。

我认为在您的情况下，最佳做法是使用类名。不要在CSS中使用您要匹配的类名;如果它负责格式化，你（或团队中的其他人）可能会忘记它给出的行为变化，并将其用于其他不相关的元素，仅用于格式化。这可能会导致错误。最好有单独的'behavioral'和'presentation'类，在CSS中使用表示类，以及在jQuery中选择元素的行为类。

jQuery可排序选择器（“id”与“class”）？

1 个答案: