-1

我正在尝试将 jquery 滑块与 jquery sortable 结合起来，并在同一个 html 页面上使用它们。在此处查看ostapische 的 jsfiddle 解决方案

首次加载页面时，滑块（我用于突出显示列表中的项目）运行平稳，但只要在列表上使用 sortable 完成任何排序，滑块就会开始出现异常行为并在一次抓取中突出显示行块，丢失物品等

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();
});
4

2 回答 2

0

问题是，您的可排序对象有一个非常奇怪的 html 结构。<li>元素在排序时从周围移除，并且<div>s因为您在滑块代码中使用了 id，这会变得一团糟。<ul>您应该通过在其中使用with来简化您的 html <li>。你应该忽略所有的<table>东西<div>（顺便说一下，这是无效的 html！）。

然后，而不是做

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

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

于 2013-07-31T09:08:47.320 回答
0

试试这个代码。

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

我知道你想要这样的东西 

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();
});
于 2013-07-31T09:56:42.970 回答