Question

我有几个：

        <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应用程序，所以请你好。

Answer 1

您分配给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/

Answer 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并删除任何字母，连字符或下划线，只留下数字，我们需要的位。

Answer 3

将i传递到幻灯片功能中，如下所示：

slide: function( event, ui, i ) {
         $( '#amount' + i ).val( ui.value );
       }

Answer 4

您的}似乎缺少右括号function slide(i)。否则你的脚本对我来说就像一个魅力。

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

多次调用javascript函数

4 个答案: