jquery - Calling a javascript function multiple times - Stack Overflow

admin管理员组

文章数量:1403443

I have a couple of those:

        <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>

The others have the same structure, but the ids differ by their index number. And I need a function to set up the JQuery sliders. What I did is this:

            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" ) );
            }

And call it like so:

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

This does not work at all. Where is my mistake ? It's my first JQuery app, so please be nice.

I have a couple of those:

        <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>

The others have the same structure, but the ids differ by their index number. And I need a function to set up the JQuery sliders. What I did is this:

            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" ) );
            }

And call it like so:

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

This does not work at all. Where is my mistake ? It's my first JQuery app, so please be nice.

• javascript
• jquery

Share Improve this question Follow edited Dec 9, 2012 at 21:34 Marius Cotofana asked Dec 9, 2012 at 21:13 Marius CotofanaMarius Cotofana 1,17911 gold badge1212 silver badges1414 bronze badges 6

• What do you mean by "does not work"? – Jeff Commented Dec 9, 2012 at 21:17
• 1 Whatever you do, please don't check the error console. That would just make it too easy for us. :P – Šime Vidas Commented Dec 9, 2012 at 21:18
• Chrome's console shows no errors, if that is what you mean. – Marius Cotofana Commented Dec 9, 2012 at 21:24
• Try throwing a console log or alert into the slider function - is it actually being called? – Jeff Commented Dec 9, 2012 at 21:24
• No, it is not. May the order in which you write the elements be the problem ? – Marius Cotofana Commented Dec 9, 2012 at 21:32

 |  Show 1 more ment

4 Answers 4

Sorted by: Reset to default 2

The function you assign to slide only takes two parameters, it should be

        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" ) );
        }

Also make sure you include jquery ui JS and CSS files

http://jsfiddle/mowglisanu/Z2aaE/1/

You seem to be overplicating things slightly there... something like this is probably all you need (I have added loads of ments to the code to try explain what is going on):

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);
});

Haven't tested this so not 100% there are no errors in the above but something like that should work.

=================================== UPDATE ======================================

Since you thought the above looked more plicated, here is the exact same code without the ments and caching to show you just how simple it actually is:

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);
});

I added in the caching before for performance so without it, it will perform slower but will still work. The .replace() bit is getting the slider ID and removing any letters, hyphens or underscores to leave just the number, the bit we need.

Looks like you are missing a closing brace } in your function slide(i). Otherwise your script worked like a charm for me.

In the future, you should post the error that you got, or that you didn't get an area. You can check your code for errors from within the console of any modern web browser.

Pass i into your slide function like this:

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

本文标签： jqueryCalling a javascript function multiple timesStack Overflow