【问题标题】:Unable to get index from jQuery UI slider range无法从 jQuery UI 滑块范围获取索引
【发布时间】:2010-04-25 19:32:31
【问题描述】:

我正忙着从多个滑块的集合中获取(我认为是)一个简单的索引。 HTML如下:

<div id="left-values" class="line">
    <span id="l1" style="padding: 0 1.8em;">0</span>
    <span id="l2" style="padding: 0 1.8em;">0</span>
    <span id="l3" style="padding: 0 1.8em;">0</span>
    <span id="l4" style="padding: 0 1.8em;">0</span>
    <span id="l5" style="padding: 0 1.8em;">0</span>
    <span id="l6" style="padding: 0 1.8em;">0</span>
    <span id="l7" style="padding: 0 1.8em;">0</span>
    <span id="l8" style="padding: 0 1.8em;">0</span>
</div>

jQuery 代码是:

    // setup audiometry sliders
    $("#eq > span").each(function (e) {
        // read initial values from markup and remove that
        var value = parseInt($(this).text());
        // var index = $(this).index; <- this didn't work.

        $(this).empty();
        $(this).slider({
            value: value,
            slide: function (event, ui) {
                //console.log($(this).attr('id')); <- neither did this.
                //console.log(index);
                $('#left-values span:first').text(ui.value);
            }
        })
    });

问题在于 jQuery UI - 在创建滑块时 - 将现有的 HTML 替换为它自己的标记。这包括任何 ID 值,无论出于何种原因,我也无法让给定滑块的索引浮出水面。所以我的想法不多了。

【问题讨论】:

    标签: jquery-ui slider


    【解决方案1】:

    你可以这样获取索引:

    $("#eq > span").each(function (index, Element) {
        alert(index);
        ...
    

    http://api.jquery.com/each/

    【讨论】:

    • 难以置信。我花了太多时间在 jQuery UI 上花时间,我完全忘记了调用函数。有人想因为我未能参加 RTFM 而对我投反对票吗?谢谢指点。
    【解决方案2】:

    你有什么作品,也许你还有其他事情在做。这是一个独立的示例,观察控制台的输出:http://jsfiddle.net/FBh3a/1/

    $("#eq > span").each(function (e) {
        var value = parseInt($(this).text());    
        $(this).empty();
        $(this).slider({
            value: value,
            min: -10,
            max: 10,
            slide: function (event, ui) {
              console.log($(this).attr('id')); //<- works here, outputs l1, l2, etc
              console.log($(this).index()); //outputs 0, 1 .... 7 (0-based index)
            }
        });
    });​
    

    【讨论】:

      猜你喜欢
      • 2021-10-06
      • 1970-01-01
      • 2019-06-21
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-12-12
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多