Question

我试图在工作日实现jquery UI“滑块”：

<!-- Sliders -->
<span id="sliderList">
    <div id="slider-range-sunday" data-start="14" data-end="18"></div></br/>
    <div id="slider-range-monday" data-start="1" data-end="1"></div></br/>
    <div id="slider-range-tuesday" data-start="1" data-end="1"></div></br/>
    <div id="slider-range-wednesday" data-start="1" data-end="1"></div></br/>
    <div id="slider-range-thursday" data-start="1" data-end="1"></div></br/>
    <div id="slider-range-friday" data-start="1" data-end="1"></div></br/>
    <div id="slider-range-saturday" data-start="1" data-end="1"></div>
</span>


<script type="text/javascript">
    $("#sliderList > div ").slider({
        range: true,
        min: 0,
        max: 24,
        values: [ parseInt($(this).attr("data-start")) , parseInt($(this).attr("data-end"))]
    });
</script>

默认值包含在div的“data-start”和“data-end”中，但我无法通过以下方式访问它们：

$(this).attr("data-start")

我收到以下错误（使用chrome进行调试）

Uncaught TypeError: Cannot call method 'addClass' of undefined 
jquery.ui.slider.js?body=1:204

每个人都知道为什么吗？谢谢

----编辑

现在它的工作得益于Itay的帮助，代码如下：

$("#sliderList > div ").each(function(index){
    $(this).slider({
         range: true,
         min: 0,
         max: 24,
         values: [ parseInt($(this).attr("data-start")) , parseInt($(this).attr("data-end"))],
         slide: slideTime
     });
});

Answer 1

总结一下我们对评论的讨论，使用下面的代码（这个想法是我的，但写的都是你的，这很棒！）：

$("#sliderList > div ").each(function(){
    $(this).slider({
         range: true,
         min: 0,
         max: 24,
         values: [ parseInt($(this).attr("data-start")),
                   parseInt($(this).attr("data-end"))],
         slide: slideTime
     });
});

HTML5中的滑块jquery和“data-”属性

1 个答案: