Question

我有一个页面，用户可以调用滑块来更改图像的外观。只有一个滑块可见，但可能总共10个。而不是为每个人编写js函数我试图使用HTML5 data-变量进行简化。

这是两个滑块的html，一次只能显示一个：

<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，即在这种情况下，亮度或对比度。

没有设置任何值，我不明白为什么。有没有更好的方法来做这个或这个代码是错的？

Answer 1

问题似乎是您尝试选择.data()属性的方式。如果你console.log他们你会注意到它们是用小写而不是camelCase写的。您还需要一个.each()循环来为每个具有editSlider类的div创建一个滑块。（正常的for循环也是可能的）

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

所以你可以在HTML中把它们写成camelCase（但不应该），并在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 specs的链接（基本上也是这样说的）

Answer 2

您使用的是哪个版本的JQuery？

如上所述here

jQuery 1.5和1.6中的更改意味着数据属性现在被强制为小写

JQuery documentation，州

在jQuery中更改了嵌入破折号的属性处理 1.6符合W3C HTML5规范。

所以最好的方法是在标记短划线中分别定义属性

    <div class="editSlider" data-min-val="-20" data-max-val="20" data-edit-value="curValB"></div>

，并在脚本中使用驼峰版本

 ...
 min: div.data("minVal"),
 max: div.data("maxVal"),
 ...

Answer 3

div将包含div的集合，因此div.data("minVal")不会返回您想要的内容。你想要当前div的minVal。您可以尝试$(this).data("minVal")，但我不确定this是否设置为当前实例。重复maxVal和editValue

使用“data- *”和JQueryUI滑块

3 个答案: