0

2 つの jQUERY 関数を取得しました。変数を最初から 2 番目に渡したいと考えています。私が読んだことから、変数をグローバル変数として設定する必要がありますが、私が読んで再現しようとする方法は機能していないようです。

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

変数の取得: 関数 example(a) {index = a};

これではうまくいきません.$.postにインデックスを変数として含めようとすると、関数が壊れます。

2 番目の方法 この方法について完全には認識していませんが、完全に理解すれば、これは解決策のように思えます: document.write() - しかし、再度取得する方法を知ることができないようです。

このかなり単純なことを次の関数に渡すために多くのことを試したので、誰かがこれに対する解決策を持っていることを願っています。

前もって感謝します。

4

3 に答える 3

2

通常、私はNamespacesの使用を好みます。より洗練されており、ページのどこからでも変数を参照できます。

私が通常使用するセットアップは次のようなものです。

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

この構造により、コードが簡潔になり、他のスクリプトから参照しやすくなります。

于 2012-09-22T22:41:32.890 に答える
0

私がよく理解していれば...

2 つの関数の最初の共通スコープでグローバル変数を定義する必要があります... javascript が参照するスコープが多いほど、処理に時間がかかることに注意してください...

$(function() {

   var globalVar = '';

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

   $("#slider-range").plugin2({callback:function() {
         // you have access to globalVar
   }});
});
于 2012-09-22T22:09:22.383 に答える
0

スコープ外の変数を使用して、これをさまざまな方法で行うことができますが、お勧めしません!...

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

});

ドキュメント対応の 2 つの同封物をマージし、変数のスコープを設定しています...

$(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);        
        }); 
    }
  });
});
于 2012-09-22T23:20:10.810 に答える