2

在下面的代码中，我创建了十个元素并将它们全部传递给 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));
})
4

2 回答 2

2

您必须使用 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的其他元素

@@@@@ 见例子

于 2013-01-08T12:39:11.847 回答
2

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

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

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

于 2013-01-08T12:40:53.130 回答