-1

jquery スライダーと jquery ソート可能を組み合わせて、同じ html ページで使用しようとしています。ここでostapischeによるjsfiddleソリューションを参照してください

ページが最初にロードされたとき、スライダー (リスト上のアイテムを強調表示するために使用します) はスムーズに動作しますが、並べ替え可能なリストで並べ替えが行われるとすぐに、スライダーは誤動作を開始し、1 回のグラブで行のブロックを強調表示します。アイテムなど

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

問題は、sortables に非常に奇妙な html 構造があることです。<li>要素は並べ替え時に周囲から削除されます。<div>sスライダー コードで ID を使用しているため、これが台無しになります。ソート可能に<ul>withを使用するだけで、html を単純化する必要があります。と<li>をすべて除外する必要があります (ちなみに、これは無効な html です!)。<table><div>

次に、する代わりに

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 に答える