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

将变量传递给另一个函数

3 个答案: