0

我有一个页面，用户可以在其中调用滑块来更改图像的外观。只会有一个可见的滑块，但总共可能有 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，即在这种情况下，亮度或对比度。

没有设置任何值，我不知道为什么。有没有更好的方法来做到这一点，或者这段代码是错误的？

4

3 回答 3

1

您使用的是什么版本的 JQuery？

如此处所述

jQuery 1.5 和 1.6 的变化意味着数据属性现在被迫小写

jQuery 文档，状态

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"),
 ...
于 2013-06-07T12:16:03.643 回答
1

问题似乎是您尝试选择.data()属性的方式。如果您console.log是他们，您会注意到它们是用小写而不是驼峰写的。您还需要一个.each()循环来为每个 diveditSlider类创建一个滑块。（正常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 规范的链接（基本上是一样的）

于 2013-06-07T06:47:20.057 回答
0

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

于 2013-06-06T07:57:37.707 回答