jquery - 如何让 jQuery 单独处理元素？

Question

在下面的代码中，我创建了十个元素并将它们全部传递给 jQuery 代码以获取功能。但是，当我单击其中一个时，所有这些都会触发单击事件。我必须如何更改此代码，以便当我单击其中一个时，它只触发该元素中的事件？

html/php:

<?php
    for ($x = 0; $x < 10; $x++) {
        $r .= '<div class="testItem"><span class="title">title1</span><span class="message"/></div>';
    }
?>  
<script type="text/javascript">
    $(function() {
        TESTITEM.initialize($('.testItem'));
    });
</script>

javascript:

var TESTITEM = TESTITEM || {};

TESTITEM.initialize = function(elemTest) {
    var elemTitle;

    this.defineVariables = function() {
        elemTitle = elemTest.find('.title');
        elemMessage = elemTest.find('.message');
    }

    this.functionalizeElements = function() {
        elemTitle.click(function(e) {
           elemMessage.html('done'); 
        });
    }

    this.decorateElements = function() {
        elemTitle.css('color','brown');
    }

    this.defineVariables();
    this.decorateElements();
    this.functionalizeElements();
}

附录:

当我将其更改为此，并单击任何元素时，只有最后一个元素显示文本:

$('.testItem').each(function(){
    TESTITEM.initialize($(this));
})

Answer 1

你必须使用jquery的每个函数，并在其中使用$(this)

$('.testItem').each(function(){
   $(this).find('.title').click(function(e) {
       $(this).parents('.testItem').find('.message').html('done');
        $(this).css('color','brown');
    });
})

$('.testItem').each 将获取所有具有 testItem 类的选择器

和

使用$(this)，您可以选择单独的选择器，这样操作就不会影响具有类testItem的其他元素

@@@@@ See Example