javascript - jQueryを使用した2つのonclickアクションの変数

Question

クリック時に変数を作成し、別の onclick アクションで使用しようとしています。しかし、2番目の onclick が使用しようとすると、変数が存在しないようです。

$( "#search" ).click(function() {
    var myVariable = $(document).scrollTop();
});

$( "#gachette" ).click(function() {
    $('html, body').animate({scrollTop:myVariable}, 10);
});

なぜうまくいかないのか考えていますか？

Answer 1

変数をグローバルにします。

$( "#search" ).click(function() {
   myVariable = $(document).scrollTop(); //global variable remove var from starting
});

var変数をスコープに対してローカルにします。

または、外部で変数を宣言します

var myVariable;
$( "#search" ).click(function() {
   myVariable = $(document).scrollTop();
});

JavaScript の変数のスコープとは何ですか?をお読みください。および変数のスコープ (JavaScript)

Answer 2

それはすべてスコープに関するものです

var myVariable; // DEFINE OUTSIDE!

$( "#search" ).click(function() {
    myVariable = $(document).scrollTop(); // DON'T USE var HERE
});

$( "#gachette" ).click(function() {
    $('html, body').animate({scrollTop:myVariable}, 10);
});

Answer 3

そしてグローバルなし：

$("#search").on('click', function() {
    $("#gachette").data('scrollTop', $(window).scrollTop());
});

$("#gachette").on('click', function() {
    $('html, body').animate({scrollTop: $(this).data('scrollTop')}, 10);
});