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

是的，至少有两种方法可以做到这一点：

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()在悬停函数中使用 jQuery 来保存oldImgimg-Element：

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

信息保存在 DOM 树中，因此您可以通过悬停功能访问它：

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

PS：也许在文档初始化而不是在悬停事件中执行保存更健壮...

于 2012-01-13T11:47:00.693 回答