2

私は学習者なので、まだ経験が必要で、多くの質問がありますが、今日はホバー機能について 1 つだけ質問があります。

最初のホバー関数から2番目のホバー関数に変数に関する情報を送信することは可能ですか? これ以上の情報は必要ないと思います。タグの src から一部を変更しているだけです。

あなたが私を理解してくれることを願っています。=)

ここに例があります

http://jsbin.com/eporib/edit#javascript,html,live

今見てはどうですか!

box.hover(function(){
    var $this = $(this),
                oldImg = $this.find('img').attr('src'),
                slicedOldImg = oldImg.slice(0,-5),
                newImg = slicedOldImg+num6;
    $this.find('img').attr('src', newImg);
      $('#hello').append('IN '+newImg);

}, function() {
              var $this = $(this),
                  oldImg = $this.find('img').attr('src'),
                  slicedOldImg = oldImg.slice(0,-5),
                  newImg = slicedOldImg+num1;
    $this.find('img').attr('src', newImg);
            $('#hello').append('OUT '+newImg+ '<br />');

}); /*end Hover*/

そして、どのように私はそれをしたいです

box.hover(function(){
    var $this = $(this),
                oldImg = $this.find('img').attr('src'),
                slicedOldImg = oldImg.slice(0,-5),
                newImg = slicedOldImg+num6;
    $this.find('img').attr('src', newImg);
      $('#hello').append('IN '+newImg);

}, function() {
    $this.find('img').attr('src', oldImg);
          //look here, the oldImg is in the first function.
          // and i want it use it in the second too.

            $('#hello').append('OUT '+newImg+ '<br />');

}); /*end Hover*/
4

3 に答える 3

1

はい、これを行うには少なくとも2つの方法があります。

1.クロージャーを使用する

すべてをクロージャでラップし、そのクロージャで変数を使用します。

(function() {
    var oldImg;

    box.hover(function(){
        var $this = $(this), slicedOldImg newImg;
        oldImg = $this.find('img').attr('src'); // Setting it
        slicedOldImg = oldImg.slice(0,-5);
        newImg = slicedOldImg+num6;
        $this.find('img').attr('src', newImg);
          $('#hello').append('IN '+newImg);

    }, function() {
        // Missing `var $this = $(this);` here?
        if (oldImg) {
            // Use it
            $this.find('img').attr('src', oldImg);

            // and clear it
            oldImg = undefined;
        }

        $('#hello').append('OUT '+newImg+ '<br />');

    }    ); /*end Hover*/
})();

この例では、クロージャーに対してすぐに実行する匿名ラッパー関数を使用していますが、クロージャー(関数)でこのコードを既に実行している可能性があるため、そのラッパーを追加する必要はありません。(「クロージャー」という言葉が初めての場合でも、心配しないでください。クロージャーは複雑ではありません。)

2.使用するdata

dataまたは、要素に情報を保存するために使用できます。

box.hover(function(){
    var $this = $(this),
                oldImg = $this.find('img').attr('src'),
                slicedOldImg = oldImg.slice(0,-5),
                newImg = slicedOldImg+num6;
    $this.data("oldImg", oldImg);
    $this.find('img').attr('src', newImg);
      $('#hello').append('IN '+newImg);

}, function() {
    // Missing `var $this = $(this);` here?
    var oldImg = $this.data("oldImg");
    if (oldImg) {
        $this.find('img').attr('src', oldImg);
        $('#hello').append('OUT '+newImg+ '<br />');
    }    
}    ); /*end Hover*/
于 2012-01-13T11:33:40.927 に答える
1

.data()プロパティにいくつかの追加データを保存してみてください。

box.hover(function(){
    var $this = $(this),
                oldImg = $this.find('img').attr('src'),
                slicedOldImg = oldImg.slice(0,-5),
                newImg = slicedOldImg+num6;

          $this.data('slicedOldImg', slicedOldImg);

    $this.find('img').attr('src', newImg);
          $('#hello').append('IN '+newImg);

}, function() {
    $this.find('img').attr('src', oldImg);
          //look here, the oldImg is in the first function.
           and i want it use it in the second too.
                var slicedOldImg = this.data('slicedOldImg');
                var newImg = slicedOldImg+num1;

            $('#hello').append('OUT '+newImg+ '<br />');

}); /*end Hover*/
于 2012-01-13T11:34:33.330 に答える
0

data()hover -in 関数内でjQuery を使用oldImgして、img-Elementに保存できます。

$this.find('img').data('oldImg', oldImg);

情報は DOM ツリー内に保存されるため、ホバーアウト機能からアクセスできます。

var oldImg = $this.find('img').data($img, 'oldImg');

PS: Hover-Event ではなく、ドキュメントの初期化で保存を実行する方が堅牢かもしれません...

于 2012-01-13T11:47:00.693 に答える