javascript - 通过使用jQuery的DOM遍历直接访问javascript对象

我正在使用一个简单的客户端接口(interface)，其中有一个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元素内的链接时，我找到父元素，该元素与this.scoreElement在DOM中是相同的元素，然后尝试将其score属性设置为1。显然，这是不起作用的，因为它是本地scoreElement.score属性。 clickHandler方法中的“未定义”。

所以这是我的问题:是否有一种简单的方法可以通过使用jQuery遍历DOM直接访问我的this.scoreElement对象？

当然，我可以通过某种方式检查this.scoreElement == $(element).parent()，然后访问this.scoreElement对象中的正确属性，但是直接访问会更加优雅和健壮。这可能吗？我会以错误的方式走吗？谢谢!

PS:忽略我使用parent()查找scoreElement的事实，我仅用它来说明我的问题。除非它是问题的一部分，否则不要忽略:)

最佳答案

虽然当然可以使用您自己的“控制对象”来存储相关数据，但我通常更喜欢依靠jQuery来完成-使用.data()方法，如下所示:

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

这种方法使我可以更轻松地进行扩展，因为我永远不必担心“重叠”问题，使用单个“控制”对象而不是逐个对象。