JQuery код улучшения. Функция наведения, я пытаюсь получить информацию о значении в первой функции - PullRequest
Новая
       7

JQuery код улучшения. Функция наведения, я пытаюсь получить информацию о значении в первой функции

2 голосов
/ 13 января 2012

Я ученик, поэтому мне нужно еще опыт, и у меня много вопросов, но сегодня у меня есть только один вопрос о функции наведения.

возможно ли отправить информацию о переменной из первой функции наведения во вторую? Я думаю, вам не нужно больше информации. просто меняет деталь из 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*/

Ответы [ 3 ]

1 голос
/ 13 января 2012

Попробуйте сохранить некоторые дополнительные данные в .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*/
1 голос
/ 13 января 2012

Да, есть как минимум два способа сделать это:

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*/
0 голосов
/ 13 января 2012

Вы можете использовать jQuery´s data() внутри функции наведения, чтобы сохранить oldImg в элементе img: 

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

Информация сохраняется в дереве DOM, поэтому вы можете получить к ней доступ с помощью функции наведения: 

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

PS: Возможно, более надежно выполнить сохранение при инициализации документа, а не при Hover-Event ...

...