将变量传递给另一个函数

Question

I got 2 jQUERY functions - and i want to pass a variable from the first to the second. From what i read i need to set the variable as a global variable, but the methods i read and try to reproduce doesn't seem to work.

    $(function() {
        $("#selectable").selectable({
            stop: function() {
            $(".ui-selected", this).each(function() {
            var index = $("#selectable li").index(this); });}});});

    $(function() {
    $("#slider-range").slider({
        range: true,
        min: 0,
        max: 180,
        values: [0, 180],
            slide: function(event, ui) {
            var result = $("#result").empty();
            var low = (ui.values[0]);
            var high = (ui.values[1]);
            HERE I NEED THE VARIABLE FROM THE ABOVE FUNCTION

            $.post('search.php',{low: (ui.values[0]), high: (ui.values[1]), HERE I NEED VARIABLE FROM THE ABOVE FUNCTION},
            function(data){
            result.append(data);        
            }); 

• I have tried to do like this:

FIRST METHOD - Seen here : http://www.quirksmode.org/js/function.html

setting variable : example(index);

retrieveing variable : function example(a) {index = a};

This i can't get to work.. the functions breaks when i try to include the index as the variable in the $.post.

SECOND METHOD Not fully aware about this method, but this seems like a solution, if fully understood: document.write() - But i can't seem to get to know how to retrieve it again.

Hope somebody has a solution for this as i have had tried a load of things to try to pass this rather simple thing on to the next function.

Thanks in advance.

Answer 1

Well, I usually prefer the use of Namespaces , it's more elegant, and you can reference to the variable anywhere on the page.

The setup I normally use is like this:

var Namespace = (function() {

    return {

            /**
            * Initialize the page. 
            */
            init: function() {

                  //Here you can set Global Variables 
                  //inside the Namespace using "this"
                  this.variable1 = true;
                  this.variable2 = false;

                  //You may call other functions
                  this.setListeners();

            },

            setListeners() {

                  //You may reference the variables using "this"
                  if(this.variable1 == true) {
                      alert(this.variable2);
                  }
            },

            otherFunction() {

                  //When calling functions with callbacks, 
                  //you should set a variable inside the function 
                  //so you may use that in the callbacks to the namespace
                  var self = this;

                  $("#target").click(function() {
                     //Now you can use the variable self in the callbacks
                     alert(self.variable1);

                     //Or you may also use the namespace
                     alert(Namespace.variable1);
                  });
            }
      };
})();

$(document).ready(function(){
         //Here you may call the init function which should fire 
         //everything else you need in the page load
         Namespace.init();
});

//You may also use the variables anywhere else in the page 
//or in other Javascript files by referencing to the namespace

//Variable
Namespace.variable1;
Namespace.variable2;

//Function
Namespace.otherFunction();

This structure makes the code cleaner and easy to reference by other scripts.

Answer 2

If I well understood ...

You have to define a global variable in the first common scope of your 2 functions ... Notice that the more scopes javascript should look up, the more the precess is time consuming ...

$(function() {

   var globalVar = '';

   $("#selectable").plugin1({callback:function() {
         // you have access to globalVar
   }});

   $("#slider-range").plugin2({callback:function() {
         // you have access to globalVar
   }});
});

Answer 3

You could do this any number of ways, using an unscoped variable, not recommended!...

$(function() {

  $("#selectable").selectable({
    stop: function() {
      $(".ui-selected", this).each(function() {
        index = $("#selectable").index(this);
      });
    }
  });

});

$(function() {

  $("#slider-range").slider({
    slide: function() {
      // Might want to check index is set as is might not have
      // been set yet
      $.post("search.php", {low: x, high: y, index: index}, function() {
        // Do something
      });
    }
  });

});

Merging your two document ready enclosures and scoping a variable within...

$(function() {

  var index;

  $("#selectable").selectable({
    stop: function() {
      $(".ui-selected", this).each(function() {
        index = $("#selectable").index(this);
      });
    }
  });

  $("#slider-range").slider({
    slide: function() {
      // Might want to check index is set as is might not have
      // been set yet
      $.post("search.php", {low: x, high: y, index: index}, function() {
        // Do something
      });
    }
  });

});

Or by passing it along as a data attribute...

$(function() {

  $("#selectable").selectable({
    stop: function() {
      $(".ui-selected", this).each(function() {
        $("#selectable").data("index", $("#selectable").index(this));
      });
    }
  });

  $("#slider-range").slider({
    slide: function() {
      var index = $("#selectable").data("index");
      // Might want to check index is set as is might not have
      // been set yet
      $.post("search.php", {low: x, high: y, index: index}, function() {
        // Do something
      });
    }
  });

});

You could also wrap it within an object and use an instance property, or scope it within an enclosure or anonymous function.

Giving details on how it breaks would be good. You might want to check that the value is as you expect it, ie

$(function() {
  $("#selectable").selectable({
    stop: function() {
      $(".ui-selected", this).each(function() {
        index = $("#selectable li").index(this);

        // Check the index after the selection
        console.log("Selected index " + index);
      });
    }
  });
});

$(function() {
  $("#slider-range").slider({
    range: true,
    min: 0,
    max: 180,
    values: [0, 180],
    slide: function(event, ui) {

      var result = $("#result").empty();
      var low = (ui.values[0]);
      var high = (ui.values[1]);

      // Check the index before the post
      console.log("Slide index " + index);        

      $.post('search.php', {
          low: ui.values[0], 
          high: ui.values[1], 
          index: index
        }, 
        function(data){
          result.append(data);        
        }); 
    }
  });
});