Доступ к объекту javascript непосредственно через DOM, проходящий через jQuery

Question

Я работаю над простым интерфейсом на стороне клиента, где у меня есть объект jQuery, к которому я хочу получить доступ непосредственно при нажатии на гиперссылку. Упрощенный код:

<div class="controls"> 
    <div class="score"> 
     <a class="button" href="/add">Add points!</a> 
    </div> 
</div> 


$(".controls").myControls(); 

$.fn.myControls = function() { 
    return $.extend(this, $.myControls).initialize(); 
} 

$.myControls = { 
    initialize: function() { 
     this.scoreElement = $("div.score", this); 
     this.linkElement = $("a", this.scoreElement); 

     this.scoreElement.score = 0; 

     var _this = this; 
     this.linkElement.click(function() { 
      _this.clickHandler(this); 
     }); 
    }, 
    clickHandler: function(element) { 
     var scoreElement = $(element).parent(); 
     scoreElement.score = 1; 
    } 
} 

Пояснение: .controls элемент имеет .score элемент, который удваивает в качестве контейнера для информации (оценка this.scoreElement.score). Когда я нажимаю ссылку в элементе .score, я нахожу родительский элемент, который является тем же самым элементом в DOM, что и this.scoreElement, и попытайтесь установить его свойство score на 1. Очевидно, что это не сработает, так как местное свойство scoreElement.score в методе clickHandler «не определено».

Так вот мой вопрос: есть простой способ получить доступ к моему this.scoreElement объекту непосредственно через обход DOM с JQuery?

Обязательно могу проверить, this.scoreElement == $(element).parent() в некотором роде, а затем получить доступ к объекту недвижимости в моем this.scoreElement объекте, но прямой доступ будет более изящным и надежным. Это возможно? Неужели я ошибаюсь? Благодаря!

PS: Игнорируйте тот факт, что я использую parent(), чтобы найти scoreElement, я использую его только для иллюстрации моей проблемы. Если это не является частью проблемы, в этом случае не игнорируйте :)

Answer 1

Хотя это, конечно, можно использовать свой собственный «контроль-объект», чтобы сохранить соответствующие данные, обычно я предпочитаю полагаться на JQuery это делать - с .data() способом, как это:

$(this.scoreElement).data('score', 0); // in initialize() 
$(this).parent().data('score', 1); // in clickHandler() 

Этот подход позволяет мне масштабироваться более легко, так как мне никогда не нужно бояться «перекрывающихся» проблем, используя единственный объект «control», а не объект для элемента.

Answer 2

Я бы подумал, что если вы использовали прокси-функцию jQuery для вашего обработчика кликов, вы могли бы просто пойти this.scoreElement внутри clickHandler, и вы бы даже не нужно пересекать DOM. Как это:

$.myControls = { 
    initialize: function() { 
     this.scoreElement = $("div.score", this); 
     this.linkElement = $("a", this.scoreElement); 

     this.scoreElement.score = 0; 

     this.linkElement.click($.proxy(this.clickHandler, this)); 
    }, 
    clickHandler: function(event) { 
     var element = event.target; 
     this.scoreElement.score = 1; 
    } 
} 

Answer 3

После прогрессивного упрощения (и сохранения оценки несколько иначе) я получаю код ниже, в котором scoreElement обнаружен один раз в .controls div, а затем удерживается в закрытии, чтобы сделать его доступным для соответствующего обработчика кликов. Вы также можете использовать .closest() - см. Прокомментированную строку.

$.fn.myControls = function() { 
    return this.each(function() { 
     var scoreElement = $("div.score", $(this)); 
     scoreElement.data('score', 0); 
     $("a", scoreElement).on('click', function() { 
      scoreElement.data('score', 1);//get scoreElement from closure formed by the outer "each" function. 
      //$(this).closest(".score").data('score', 1);//alternative to the line above, not requiring closure. 
     }); 
    }); 
}; 

вызова, как и в вопросе с:

$(".controls").myControls();  

Это так тривиально и одномерно это на самом деле не гарантирует, в своем собственном праве, плагин JQuery. Если не было какой-то веская причина для плагина (., Например, повторное использование или необходимость близкородственных методов), то я бы фразу она следующим образом:

$(".controls").each(function() { 
    var scoreElement = $("div.score", $(this)); 
    scoreElement.data('score', 0); 
    $("a", scoreElement).on('click', function() { 
     scoreElement.data('score', 1);//get scoreElement from closure formed by the outer "each" function. 
     //$(this).closest(".score").data('score', 1);//alternative to line above, not requiring closure. 
    }); 
}); 

Это тот же самый код с плагином обертке удален и прикреплен непосредственно к тот же базовый объект jQuery.

И если вы действительно хотите, вы можете написать все это в три строки следующим образом:

$(".controls").find("div.score").data('score', 0).find("a.button").on('click', function() { 
    $(this).closest(".score").data('score', 1); 
});