我有一个可以点击的按钮。这个按钮可以在我的html中名为“ subtaskTaskList”的列表上启用jquery可排序类。但是,我可以使按钮切换,但是可排序的启用和禁用似乎没有响应。请参见下面的代码。
<button id="sortButton" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-adjust"></span></button>
$("#sortButton").click(function(){
if($("#sortButton").hasClass("glyphicon-adjust")){
$("#subtaskTaskList").sortable();
$("#sortButton .glphyicon").toggleClass("glyphicon-adjust glyphicon-lock");
}else{
$("#subtaskTaskList").sortable('disable');
$("#sortButton .glphyicon").toggleClass("glyphicon-lock glyphicon-adjust");
}
});
这段代码使我在控制台中出现一个错误,说如果未初始化sortable,则不能将其禁用。我尝试过此代码的变体,包括:
$("#sortButton").click(function(){
if($("#sortButton .glyphicon").hasClass("glyphicon-adjust")){
$("#subtaskTaskList").sortable();
$("#sortButton .glphyicon").toggleClass("glyphicon-adjust glyphicon-lock");
}else{
$("#subtaskTaskList").sortable('disable');
$("#sortButton .glphyicon").toggleClass("glyphicon-lock glyphicon-adjust");
}
});
以及:
$("#sortButton").click(function(){
if($("#sortButton").find("span").hasClass("glyphicon-adjust")){
$("#subtaskTaskList").sortable();
$("#sortButton .glphyicon").toggleClass("glyphicon-adjust glyphicon-lock");
}else{
$("#subtaskTaskList").sortable('disable');
$("#sortButton .glphyicon").toggleClass("glyphicon-lock glyphicon-adjust");
}
});
后两段代码甚至不会引起字形转换。任何投入将不胜感激。我查看了堆栈溢出,但没有发现任何与此问题相关的特定问题。
最佳答案
使用外部功能切换可排序的启用-禁用
$(document).on("click","button#switcher",function(){
sortDisable();
})
function sortDisable() {
$( "ul#sortme" ).sortable("disable");
}
所以用你的代码:
$("#sortButton").click(function(){
if($("#sortButton").find("span").hasClass("glyphicon-adjust")){
sortEnable("#subtaskTaskList");
$("#sortButton .glphyicon").toggleClass("glyphicon-adjust glyphicon-lock");
}else{
sortDisable("#subtaskTaskList");
$("#sortButton .glphyicon").toggleClass("glyphicon-lock glyphicon-adjust");
}
});
function sortEnable( target ) {
$( target ).sortable("enable");
}
function sortDisable( target ) {
$( target ).sortable("disable");
}