javascript - 如何在 JavaScript 中获取更改后的 slider 值

Question

http://jsfiddle.net/63BhY/

我遇到了一个奇怪的问题。我有一个带有起始值的 slider 。但是当我更改 slider 的值(通过滑动)时。我的 JavaScript slider 值未更新。怎么可能让这个工作。

变量“aantal”必须是 slider 的值。

//<![CDATA[ 

$(function(){
/// first off wrap all our code in our own scope, this means we keep our vars
/// to ourselves and don't mess up anyone elses code - doesn't usually matter
/// with your own app, but good practice is good practice.

    (function(){
        /// Hiermee kun je de lengte van je oefening bepalen.
        //var aantal = prompt("Tot hoever wil je oefenen? Geef een nummer op.");

        var aantal = $('#slider1').val();

        /// might as well store an array with each answer, could be improved
        /// by storing the question as well - so in the end you could give
        /// the user a summary.
        var antwoordenAnswers = [];
        var antwoordenPartituur = 0;  /// store the score count
        var antwoordVerwacht = null; /// keep a reference to the expected answer
        /// reformatted your arrays to better fit with SO layout ;)

        // all special characters: http://kompoos.nl/manuals/ascii/javascript-special-characters.html
        // \337 = ß
        // \374 = ü
            var vierdeNaamval = [
                "bis", "durch", "f\374r", "gegen",
                "ohne", "um", "entlang"
            ],
            derdeNaamval = [
                "aus", "bei", "mit", "nach", "seit",
                "von", "zu", "entgegen", "au\337er",
                "gegen\374ber", "an...vorbei"
            ],
            keuzevoorzetsel = [
                "an", "auf", "hinter", "neben", "in",
                "\374ber", "unter", "vor", "zwischen"
            ];

        /// added some translation vars for English people 
        /// out there (and to help me)
        var accusative = vierdeNaamval,
            dative = derdeNaamval,
            choicePreposition = keuzevoorzetsel;

        /// to aid with a random choice it's nice to work with arrays
        var opties = [vierdeNaamval, derdeNaamval, keuzevoorzetsel];
        var options = opties;

        /// ... then we can use a function like this to grab a random item
        var getRandomItem = function( a ){
            return a[Math.floor((a.length)*Math.random())];
        };

        /// handle writing the question, as stated 
        /// by @AvlinWong - don't use document.write()
        var vraagQuestion = function(){
            /// use our simple get random item from array function
            var a = getRandomItem( opties );
            /// set the expected answer
            if ( a === derdeNaamval ) {
                antwoordVerwacht = '3';
            }
            else if ( a === vierdeNaamval ) {
                antwoordVerwacht = '4';
            }
            else if ( a === keuzevoorzetsel ) {
                antwoordVerwacht = 'k';
            }
            /// choose a random question item from the list
            var b = getRandomItem( a );
            /// target the output element and change it's HTML
            document.getElementById('antwoord').innerHTML = b;
        };

        /// a simple function to better explain the act of updating the score
        /// in the GUI/HTML.
        var zettenPartituur = function( a ){
           document.getElementById('partituur').innerHTML = a;
        };

        /// clickOnTheButton --- hope the translation is right :)
        var klikOpDeKnop = function(e){
            /// because we are relying on pure javascript, different browsers
            /// have different event objects - srcElement for old IE, target
            /// for everything else...
            var a = e.target ? e.target : e.srcElement;
            var corrigeren = null;
            /// because each button has a unique id, we can do this
            switch ( a.id ) {
                case 'derde':
                    corrigeren = ( antwoordVerwacht == '3' );
                break;
                case 'vierde':
                    corrigeren = ( antwoordVerwacht == '4' );
                break;
                case 'keuze':
                    corrigeren = ( antwoordVerwacht == 'k' );
                break;
            }
            /// if they were correct, tell them so and update score
            if ( corrigeren ) {
                //alert('good!');
                antwoordenPartituur++;    
                document.getElementById('goed').style.visibility="visible";
                document.getElementById('fout').style.visibility="hidden";
            }
            /// otherwise tell them not and downgrade score :(
            else {
               // alert('wrong!');
                antwoordenPartituur--;
                document.getElementById('goed').style.visibility="hidden";
                document.getElementById('fout').style.visibility="visible";

            }

            /// collect the answer
            antwoordenAnswers.push( corrigeren );
            /// output the score to the user
            zettenPartituur( antwoordenPartituur );
            /// because we are storing an array of answers it's easy
            /// to tell how many there have been by .length of the array
            //if ( antwoordenAnswers.length > 10 ) {
              if ( antwoordenPartituur >= aantal ) {    
                /// all done!
                alert("Hoera! Je bent klaar!! / You're done!!");
            } else {
                /// generate a new question
                vraagQuestion();
            }
        }
        /// using a simple window.onload will mean we know that we can
        /// start messing around with the HTML on the page. This could
        /// be improved using addEventListener/attachEvent but as this
        /// is your own app with bespoke code you don't need to worry.
        /// Unless you start using any plugins or third-party libraries.
        window.onload = function(){

            /// target the button wrapper in the HTML
            var wikkelWrapper = document.getElementById('buttons'),
                /// find all buttons within wrapper
                knoppenButtons = wikkelWrapper.getElementsByTagName('button'),
                i, l = knoppenButtons.length, a;

            /// step each button found and apply an event listener using the
            /// more accepted and improved addEventListener/attachEvent methods
            /// there are many reasons as to why these are better to use
            /// just search StackOverflow for reasons as to why :)
            for(i=0; i<l; i++){
                a = knoppenButtons[i];
                /// for all good browsers
                if ( a.addEventListener ) {
                    a.addEventListener('click', klikOpDeKnop);
                }
                /// for good ol' Internet Explorer
                else if ( a.attachEvent ) {
                    a.attachEvent('onclick', klikOpDeKnop);
                }
            };

            /// set the ball rolling / stelt u de bal aan het rollen
            /// first set the output of the score
            zettenPartituur(antwoordenPartituur);
            /// then set the first question
            vraagQuestion();

        }

    })(); /// this construction can be confusing, it basically just creates
    /// a new anonymous function and then executes it straight away. we are
    /// using the anon function for it's scope so that we keep our variables
    /// and methods separated from other code.
});//]]> 

Answer 1

很难看出你在这里做什么(不是我的语言)，但是可以像这样检索 slider 的值，

$("#slider").slider({
  slide: function(e) {
    $(this).val(); // Value each mouse move when sliding.
  },
  change: function(e) {
    $(this).val(); // Value on slide end, or when changed programatically.
  },
  stop: function(e) {
    $(this).val(); // Value on slide end.
  }
});