0

ウェブサイトにスライダーがあり、スライドすると画像が消えたり現れたりします。これは、条件ステートメントによって行われます。

$(function () {
    $("#slider-range").slider({
        range: true,
        min: 300,
        max: 3000,
        values: [300, 3000],
        step: 10,
        slide: function (event, ui) {
            $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
            var handlevalues = ($("#slider-range").slider('values'));
            var object0001={price:1300}
            var object0002={price:1400}
            var object0003={price:1240}
            if (object0001.price > handlevalues[0] && object0001.price < handlevalues[1]) {
                $("#dot0001").css("visibility", "visible");
            } else {
                $("#dot0001").css("visibility", "hidden");
            }
            if (object0002.price > handlevalues[0] && object0002.price < handlevalues[1]) {
                $("#dot0002").css("visibility", "visible");
            } else {
                $("#dot0002").css("visibility", "hidden");
            }
            if (object0003.price > handlevalues[0] && object0003.price < handlevalues[1]) {
                $("#dot0003").css("visibility", "visible");
            } else {
                $("#dot0003").css("visibility", "hidden");
            }
        }
    });
});

問題は、100 を超える画像と対応するオブジェクトがあり、それらをすべて追加するには時間がかかり、コードが非常に長くなってしまうことです。その上で、毎日画像を追加および削除します。これを短くする方法はありますか？これは私が考えたことですが、私にはそれを行う知識がありません。

jQuery で、名前が「object」で始まり、プロパティ「price」の値がスライダーの範囲内にあるすべてのオブジェクトを識別できるようにします。これを簡単にするために、これを set1 とします。

次に、jQuery に、「ドット」で始まり、セット 1 のオブジェクトと同じ 4 桁の数字で終わるすべての ID を見つけて、それらを表示し、「ドット」で始まる ID を持つ他のすべての画像を非表示にします。 .

与えられたコードを使用した例: jQuery はそれをスキャンして見つけますobject0001.price= 1300。次に、jquery は を持つイメージを探しますid=dot0001。object0001.price=1300スライダー画像の範囲内にある場合はid=dot0001表示され、そうでない場合は非表示になります。

どんな助けでも感謝します。質問があれば、私はここにいます。

4

2 に答える 2

2

data-以下は、サーバーコードによって生成されたhtmlの属性としてアイテムの価格を挿入するソリューションです。

デモの目的でDIV、テキストとして価格を使用しました。アイテムには共通のクラス名があり、IDは必要ありません。

<div class="item" data-price="320">320</div>

スライドコードはまだ少し最適化を使用できますが、これがモジュールがここで機能する必要がある方法であることが確実になるまで、デモコードは次のとおりです。

/* cache items */
var $items=$('.item'), $max=$('#max'), $min=$('#min');

$("#slider").slider({
        range: true,
        min: 300,
        max: 800,
        values: [300,800],
        step: 10,
        slide: function (event, ui) {
            var min=ui.values[0],max=ui.values[1];
            /* show slider values in min/max spans*/
            updateDisplayValues( max,min);  
            /* changing class more efficient than inline css*/          
            $items.removeClass('hidden').filter(function(){
                var price= $(this).data('price');  
                /* filter items that fall outside of range*/              
                return price < min || price> max;
            }).addClass('hidden');
        }
});

function updateDisplayValues( max,min){
    $max.text('Max: '+ max);
    $min.text('Min: '+ min);
}

CSS：

.item.hidden{
    visibility:hidden
}

JSFIDDLEデモ

JSON配列にすべてのデータをロードするなど、必要に応じてデータをページに取り込むための簡単な方法は他にもいくつかあります。

于 2013-01-20T05:56:39.097 に答える
0 
$(function () {
    var allObjects = [
        object0001:{price:1300},
        object0002:{price:1400},
        object0003:{price:1240}
    ];
    $("#slider-range").slider({
        range: true,
        min: 300,
        max: 3000,
        values: [300, 3000],
        step: 10,
        slide: function (event, ui) {
            var priceMin, priceMax, objectName, objectStep, dotName, dotStep, visible;
            $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
            var handlevalues = ($("#slider-range").slider('values'));
            priceMin = handlevalues[0];
            priceMax = handlevalues[1];
            for ( objectName in allObjects ) {
                if ( allObjects.hasOwnProperty(objectName) ) {
                    objectStep = allObjects[objectName];
                    dotName = objectName.replace("object","dot");
                    dotStep = $("#"+dotName);
                    visible = (objectStep.price > priceMin && objectStep.price < priceMax);
                    dotStep.toggle(visible);
                }
            }
        }
    });
});

これはあなたの質問に正確に答えますが、ドット オブジェクトと allObjects JSON オブジェクトの両方を作成する必要があります。オブジェクトの価格をdata-priceドット オブジェクトの属性として設定し、allObjects をループするのではなく、$("[id^='dot']")

于 2013-01-20T05:16:43.813 に答える