將變量傳遞給另一個函數

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

設置變量：例如（指數）;

檢索變量：函數示例（a）{index = a};

這我不能上班..當我嘗試在$ .post中包含索引作爲變量時，函數中斷。

第二方法 沒有充分認識到這個方法，但是這似乎是一個解決方案，如果充分理解： document.write（）的 - 但我似乎無法瞭解如何重新找回它。

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

在此先感謝。

Answer 1

你可以這樣做任何數量的方式，採用無範圍的變量，不推薦！...

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

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

嗯，我通常喜歡使用命名空間，它更優雅，你可以在任何地方參考變量在頁面上。

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

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

這種結構通過其他腳本使得代碼更清潔和容易參考。