將變量傳遞給另一個函數

Question

我有2個jQUERY函數 - 我想從第一個到第二個傳遞一個變量。 從我讀到的我需要將變量設置為全局變量，但我閱讀並嘗試重現的方法似乎不起作用。

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

• 我試過這樣做：

第一種方法 - 見此處： http ： //www.quirksmode.org/js/function.html

設置變量：example（index）;

檢索變量：function example（a）{index = a};

我無法工作..當我嘗試將索引作為$ .post中的變量包含時，函數會中斷。

第二種方法不完全了解這種方法，但這似乎是一個解決方案，如果完全理解：document.write（） - 但我似乎無法知道如何再次檢索它。

希望有人有一個解決方案，因為我已經嘗試過一些東西試圖將這個相當簡單的事情傳遞給下一個函數。

提前致謝。

Answer 1

好吧，我通常更喜歡使用命名空間 ，它更優雅，你可以在頁面的任何地方引用變量。

我通常使用的設置是這樣的：

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

此結構使代碼更清晰，並且易於通過其他腳本引用。

Answer 2

如果我很好理解......

你必須在你的2個函數的第一個共同范圍中定義一個全局變量...請注意，javascript應該查找的范圍越多，進程越耗時...

$(function() {

   var globalVar = '';

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

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

Answer 3

您可以使用未編碼的變量以任意數量的方式執行此操作，不建議使用！...

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

});

合並兩個文檔就緒的機箱並在一個變量范圍內...

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

});

或者將其作為數據屬性傳遞...

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

});

您還可以將其包裝在對象中並使用實例屬性，或將其范圍限定在機箱或匿名函數中。

詳細說明它如何破壞會很好。 您可能想要檢查該值是否符合您的預期，即

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