4

我有几个：

        <div class="enunt">text here</div>
        <div class="ans"><input type="text" id="amount1" style="border: 0; color: #f6931f; font-weight: bold;" /></div>
        <div id="slider1" class="slide"></div>

其他的具有相同的结构，但 id 的索引号不同。我需要一个函数来设置 JQuery 滑块。我所做的是这样的：

            function slider(i) {
                $( '#slider' + i ).slider({
                    value:4,
                    min: 1,
                    max: 7,
                    step: 1,
                    slide: function( event, ui, i ) {
                        $( '#amount' + i ).val( ui.value );
                    }
                });
                $( '#amount' + i ).val( $( '#slider' + i ).slider( "value" ) );
            }

并这样称呼它：

for (var i=1; i<6; i++)
    slider(i);

这根本不起作用。我的错误在哪里？这是我的第一个 JQuery 应用程序，所以请善待。

4

4 回答 4

2

您似乎在那里使事情稍微复杂化了……您可能只需要这样的东西（我在代码中添加了大量注释以尝试解释发生了什么）：

var amountFields = [],
    selector = '.slide',
    opts = {
      value: 4,
      min: 1,
      max: 7,
      step: 1,
      slide: function(e, ui) {
        var i = ui.handle.closest(selector).data('sliderId');
        amountFields[i].val(ui.value);
      }
    };

// because you have used a '.slide' class 
// name on your sliders, you can use .each() 
// to iterate through them instead of using
// your for loop that assumes there are only 
// ever 5 sliders
$(selector).each(function() {
  // get 'i' from the sliders id attribute
  var i = this.id.replace(/[a-z\-_]/gi, '');

  // initialise slider on the element 
  // and store 'i' within the elements
  // data for easy access in the
  // slide method later
  $(this).slider(opts).data('sliderId', i);

  // DOM querying is a hit on performance 
  // so cache the jQuery object for re-use 
  // in the slide method instead of 
  // re-querying the DOM
  amountFields[i] = amountFields[i] || $('#amount' + i);

  // set the amounts initial value using 
  // the opts object instead
  amountFields[i].val(opts.value);
});

尚未对此进行测试，因此不是 100% 以上没有错误，但类似的东西应该可以工作。

==================================== 更新============== =========================

由于您认为上面的代码看起来更复杂，这里是完全相同的代码，没有注释和缓存，以向您展示它实际上是多么简单：

var opts = {
  value: 4,
  min: 1,
  max: 7,
  step: 1,
  slide: function(e, ui) {
    var i = ui.handle.closest('.slide').data('sliderId');
    $('#amount' + i).val(ui.value);
  }
};

$('.slide').each(function() {
  var i = this.id.replace(/[a-z\-_]/gi, '');
  $(this).slider(opts).data('sliderId', i);
  $('#amount' + i).val(opts.value);
});

我之前在缓存中添加了性能，所以没有它，它会执行得更慢但仍然可以工作。该.replace()位正在获取滑块 ID 并删除任何字母、连字符或下划线以仅留下数字，即我们需要的位。

于 2012-12-09T22:33:42.583 回答
2

您分配给的函数slide只需要两个参数，它应该是

        function slider(i) {
            $( '#slider' + i ).slider({
                value:4,
                min: 1,
                max: 7,
                step: 1,
                slide: function( event, ui ) {
                    $( '#amount' + i ).val( ui.value );
                }
            });
            $( '#amount' + i ).val( $( '#slider' + i ).slider( "value" ) );
        }

还要确保包含 jquery ui JS 和 CSS 文件

http://jsfiddle.net/mowglisanu/Z2aaE/1/

于 2012-12-09T21:51:56.120 回答
1

看起来}您的function slide(i). 否则你的剧本对我来说就像一个魅力。

将来，您应该发布您遇到的错误，或者您没有获得区域。您可以从任何现代 Web 浏览器的控制台中检查您的代码是否存在错误。

于 2012-12-09T21:27:19.373 回答
1

像这样传递i到您的幻灯片功能：

slide: function( event, ui, i ) {
         $( '#amount' + i ).val( ui.value );
       }
于 2012-12-09T21:16:33.627 回答