0

ユーザーがスライダーを呼び出して画像の外観を変更できるページがあります。スライダーは 1 つしか表示されませんが、合計で 10 個になる可能性があります。それぞれの js 関数を記述する代わりに、HTML5 data-変数を使用して合理化しようとしています。

これは 2 つのスライダーの html で、一度に 1 つだけ表示されます。

<div class="editSliderHolder" id="brightness">
    <label>Brightness</label>
    <div class="editSlider" data-minVal="-20" data-maxVal="20" data-editValue="curValB"></div>
</div>

<div class="editSliderHolder" id="contrast">
    <label>Contrast</label>
    <div class="editSlider" data-minVal="-40" data-maxVal="40" data-editValue="curValC"></div>
</div>

そして私が試しているJQuery：

$(document).ready(function () {
        var div = $("div.editSlider");
        div.slider({
            value: 0,
            min: div.data("minVal"),
            max: div.data("maxVal"),
            slide: function (event, ui) {
                //alert(min); // check if value set
                div.data("editValue", ui.value);
                $(this).find('.ui-slider-handle').text(Math.round(ui.value));
            },
            stop: function(event, ui) {
                div.data("editValue", ui.value);
                Caman('#capEdit', function () { 
                    this.revert(); // restore canvas
                    this.contrast(curValC); // add contrast
                    this.brightness(curValB); // add brightness
                    this.render(); // render it
                });
            }
        });
    });

つまり、最小値と最大値が各スライダーに設定され、変更する効果 (この場合は輝度またはコントラスト) を決定する ui.value も設定されます。

値が設定されておらず、その理由がわかりません。これを行うためのより良い方法はありますか、それともこのコードは間違っていますか?

4

3 に答える 3

1

.data()問題は、属性を選択しようとする方法にあるようです。console.logキャメルケースではなく小文字で書かれていることに気付くでしょう。また、クラス.each()を使用して各 div のスライダーを作成するためのループが必要です。editSlider(通常forループも可能)

console.log(div.data());
//outputs
Object {minval: -20, maxval: 20, editvalue: "curValB"}

したがって、HTML でキャメルケースとして記述し (そうすべきではありません)、jQuery で小文字でアクセスできます。

これを見るjsfiddle

$(document).ready(function () {
    var div = $("div.editSlider");
    div.each(function () {
        $(this).slider({
            value: 0,
            min: $(this).data("minval"),
            max: $(this).data("maxval"),
            slide: function (event, ui) {
                //alert(min); // check if value set
                $(this).data("editvalue", ui.value);
                $(this).find('.ui-slider-handle').text(Math.round(ui.value));
            },
            stop: function (event, ui) {
                $(this).data("editvalue", ui.value);
                /* Caman('#capEdit', function () { 
                    this.revert(); // restore canvas
                    this.contrast(curValC); // add contrast
                    this.brightness(curValB); // add brightness
                    this.render(); // render it
                });
                */
            }
        });
    });
});

MDN data-* attributes仕様によると：

* は、次の制限付きで xml 名の生成規則に従って、任意の名前に置き換えることができます。

  • これらの文字に大文字と小文字が使用されていても、名前を xml で始めてはなりません。
  • 名前にセミコロン (U+003A) を含めることはできません。
  • 名前に大文字の A から Z の文字を含めることはできません。

ここにW3C仕様へのリンクがあります（基本的に同じことを言っています）

于 2013-06-07T06:47:20.057 に答える
0

divdiv のコレクションが含まれるため、div.data("minVal")必要なものは返されません。現在のdivのminValが必要です。を試すことができますが、が現在のインスタンスに設定されて$(this).data("minVal")いるかどうかはわかりません。、およびthisについて繰り返しますmaxValeditValue

于 2013-06-06T07:57:37.707 に答える