Question

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

的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'）。每个都会让所有选择器都有 testItem 类

和

使用 $（this），您可以选择单独的选择器，以便操作不会影响具有类 testItem 的其他元素

@@@@@ See Example

Answer 2

已经提供的答案的替代方案是将elemMessage的解决方案推迟到点击事件本身;在点击处理程序中，this将被elemTitle点击。

this.functionalizeElements = function() {
    elemTitle.click(function(e) {
       $(this).closest('.testItem').find('.message').html('done'); 
    });
}

这是因为elemTitle和elemMessage都是页面上.message和.title所有实例的jQuery对象;在点击处理程序中调用elemMessage.html('done')（如您所见）设置所有这些元素的HTML。

如何让jQuery单独处理元素？

附录：

2 个答案: