Question

我正在尝试将jquery滑块与jquery sortable结合使用，并在同一个html页面上使用它们。见jsfiddle solution by ostapische here

滑块（我用于突出显示列表中的项目）在首次加载页面时运行顺畅，但只要在列表中进行任何排序并且可排序，滑块就会开始行为不正常并突出显示一行中的行抓住，缺少物品等。

function setAmount(value) {
    $("#amountDivId").html(value);
    var value10 = Math.floor(value / 10);
    if (value10 > 0) {
        $("#listUlId li:lt(" + value10 + ")").addClass("checked");
        $("#listUlId li:gt(" + (value10 - 1) + ")").removeClass("checked");
    } else {
        $("#listUlId li:eq(0)").removeClass("checked");
    }
}

$(function(){
    $("#sliderDivId").slider({
        min: 0,
        max: 30,
        step: 1,
        value: 0,
        slide: function(event, ui){
            setAmount(ui.value);
        }
    });
    $("#listUlId").sortable({
        update: function( event, ui ) {
            setAmount($("#sliderDivId").slider("value"));
        }
    });
    $("#listUlId").disableSelection();
});

Answer 1

问题是，你的sortables有一个非常奇怪的html结构。在排序时，<li>元素会从周围的<div>s中删除，因为您在滑块代码中使用了ID，这会搞砸。您应该通过使用<ul>并<li>为其进行排序来简化您的html。您应该省略所有<table>和<div>内容（顺便说一下，这是无效的html！）。

然后，而不是做

if (score>=1) {$("#td1").removeClass('cellgray').addClass('cellred'); $("#td2").removeClass('cellred').addClass('cellgray');}

滑块代码中的

，您应该遍历可排序容器（<li> dom元素）的子项，并根据滑块值激活/停用它们。所以不要在那里使用元素的ID，因为它们可能在此期间改变了它们的位置！

Answer 2

尝试this代码。

HTML

<div id="amountDivId">0</div>
<div id="sliderDivId" style="width: 100px;"></div>
<ul id="listUlId">
    <li id="listLiId_1">1</li>
    <li id="listLiId_2">2</li>
    <li id="listLiId_3">3</li>
</ul>

CSS

.checked {
    color: red;
}

Javascript

function setAmount(event, ui) {
    $("#amountDivId").html(ui.value);
    var value10 = Math.floor(ui.value / 10);
    var i;
    for (i = 1; i <= value10; i++){
        $("#listLiId_" + i).addClass("checked");
    }
    for (i = value10 + 1; i <= 3; i++) {
        $("#listLiId_" + i).removeClass("checked");
    }
}
$(function(){
    $("#sliderDivId").slider({
        min: 0,
        max: 30,
        step: 1,
        value: 0,
        slide: setAmount
    });
    $("#listUlId").sortable();
    $("#listUlId").disableSelection();
});

希望这会有所帮助。

UPD

我发现你想要像this

这样的东西

function setAmount(value) {
    $("#amountDivId").html(value);
    var value10 = Math.floor(value / 10);
    $("#listUlId li:lt(" + value10 + ")").addClass("checked");
    $("#listUlId li:gt(" + (value10 - 1) + ")").removeClass("checked");
}
$(function(){
    $("#sliderDivId").slider({
        min: 0,
        max: 30,
        step: 1,
        value: 0,
        slide: function(event, ui){
            setAmount(ui.value);
        }
    });
    $("#listUlId").sortable({
        update: function( event, ui ) {
            setAmount($("#sliderDivId").slider("value"));
        }
    });
    $("#listUlId").disableSelection();
});

jQuery滑块和sortable一起使用

2 个答案: