2

次のコードでは、10個の要素を作成し、それらすべてをjQueryコードに渡して機能を取得します。ただし、1つをクリックすると、すべてのクリックイベントが発生します。このコードの1つをクリックすると、その要素のイベントのみが発生するように、このコードを変更するにはどうすればよいですか？

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オブジェクトであるためです。クリックハンドラーを呼び出すと（これまで見てきたように）、これらすべての要素のHTMLが設定されます。.message.titleelemMessage.html('done')

于 2013-01-08T12:40:53.130 に答える