1

私が（不十分に）やろうとしているのは、クリックされたときに要素を非表示にし、その上の本文要素にテキストを追加することです。親 div を正常にターゲットにして、クリックされたクラスを追加し、その div の兄弟をターゲットにして、新しい div とそれに続くテキストを追加することができました。問題は、これらの親 div のいくつかが画面上に存在する場合、ページ上の他の div 内の要素をクリックすると、その前の div に別の「コンテンツ」div が追加されることです。私ができる最も非効率的な方法でこれを行っている可能性は十分にあります。Javascript のスキルが不足している...

    var link = $('.is-useful-link a');
    var unclicked = $('.field-name-field-review-useful');


    link.click(function(){
        $(this).parents('.field-name-field-review-useful').addClass('clicked');
        if (unclicked.hasClass('clicked')) {

            var $clicked = $('.field-name-field-review-useful.clicked');
            var content = '<div class="thanks animated fadeIn">Thanks for your feedback!</div>';

            $clicked.hide();
            $clicked.siblings('.field-name-body')
                .append(content);

        } else {
            return false;
        }
    });

ここに画像の説明を入力

4

1 に答える 1

1

これは、 を初めてクリックするlinkと、field-name-field-review-usefulのクラスが表示されるためですclicked。field-name-field-review-useful次に、clickedクラスがあるかどうかを確認し、ある場合はcontent.

を 2 回目にクリックするlinkと、同じことが起こりますが、field-name-field-review-usefulクラスに 2 つの要素があるため、コンテンツが再度追加されます。

を使用してクリック ハンドラーをアタッチすることをお勧めします。これone()により、クリック ハンドラーは要素ごとに 1 回だけ起動します (以下はテストされていないことに注意してください)。

link.one('click', function() {
  $(this).parents('.field-name-field-review-useful')
         .addClass('clicked') // do you need this anymore?
         .hide()
         .siblings('.field-name-body').append(content);       
});

.field-name-field-review-useful注: class を持つ兄弟は 1 つだけであると仮定しました。.field-name-bodyそうでない場合は、以前と同じ動作が表示されます (複数の にコンテンツが追加されます.field-name-body's)。その場合は、マークアップを再構築するか、他のトラバーサル メソッドを使用して、関連する.field-name-body.

于 2013-07-17T12:46:29.657 に答える