Есть ли способ передать «это» другой функции?

Question

У меня есть экземпляр, где мне нужно значение this, которое будет перенесено на другую функцию для использования. Очевидным решением было бы использовать глобальные переменные, но я слышал, что это не очень хорошая практика. Вот мой код:

$('.title').each(function(){ 
    $(this).click(function(){ 
     titleThis = this; 
    }); 
}); 

$('.post-footer').click(function(){ 
    $(titleThis).css('background','red'); 
}); 

JsFiddle

Как я могу сделать это без использования глобальных переменных?

Side Примечание: Я не могу сделать что-то вроде этого:

$('.title').each(function(){ 
     $(this).click(function(){ 
      var titleThis = this; 
      $('.post-footer').click(function(){ 
       $(titleThis).css('background','red'); 
      }); 
     }); 
    }); 

, потому что плагин я использую вместо .click() в этом примере (JQuery Waypoints) Выдает ошибку, когда я пытаюсь сложить его (не знаю, почему). Он отлично работает, когда я использую глобальную переменную в моем первом примере, я просто хотел бы избежать использования глобальных переменных, если это вообще возможно.

EDIT: Поскольку, как представляется, некоторые проблемы с моим примером кодом, что некоторые решения не будут работать в моем реальном коде, вот мой фактический код блок:

$('.title').each(function() { 
      //creating the waypoint 
      $(this).waypoint(function(direction) { 
//declaring global variable as this 
       titleThis = this; 
       //if below waypoint, do animation 
       if (direction === "down"){ 
        //fix the title 
        $(this.element).addClass('titleFixed'); 
        //slide right 
        $(this.element).animate({left:'10%'},250,function(){ 
         //slide title decoration right 
         $(this).next().animate({left:'0'},50); 
        }); 
        //if above waypoint, undo animation 
       }else{ 
        //unfix the title 
        $(this.element).removeClass('titleFixed'); 
        //animate left 
        $(this.element).animate({left:'-3.5%'},240,function(){ 
         //animate title direction left 
        $(this).next().animate({left:'-3.5%'},150); 
        }); 
       } 
      }); 
     }); 
     $('.post-footer').waypoint(function() { 
     $(titleThis.element).css('background','red'); 
     }); 

Если я пытаюсь гнездо второго .waypoint внутри первой, я получаю сообщение об ошибке.

Answer 1

Вам не нужны глобальные переменные. Просто заверните свой код в функцию самоисполнения:

(function(){ 
    var titleThis; 
    $('.title').click(function(){ 
     titleThis = this; 
    }); 
    $('.post-footer').click(function(){ 
     $(titleThis).css('background','red'); 
    }); 
})(); 
// `titleThis` is not defined here. 

Answer 2

Нет ничего плохого в использовании глобальной переменной, когда это необходимо. В чем-то более опасно чрезмерное использование глобальных переменных при передаче значения (или ссылки) в качестве параметра функции. Это не ваше дело, так как обработчик кликов на $ (. Post-footer) запускается независимо и не использует переменную область с помощью обработчиков щелчков $ (. Title)

Неясно, чего вы пытаетесь достичь с вашим кодом. Но вполне нормально использовать глобальную переменную, чтобы отметить, какой div был нажат последним. Если это то, за что ты стреляешь.

я бы просто предложить объявления и определения глобальной переменной первого:

var titleThis = null; 

Answer 3

Вы также можете попробовать сделать это с помощью только CSS и добавив .selected класс для вас к цели.

$('.title').each(function(){ 
    $(this).click(function(){ 
     $('.title.selected').removeClass('selected'); // Prevents having multiples selected. 
     $(this).addClass('selected') 
    }); 
}); 

$('.post-footer').click(function(){ 
    $('.title').css('background', ''); // Undo css on previous titles 
    $('.title.selected').css('background','red'); 
});