0

質問に対する回答を質問の下からスライドさせたい FAQ ページがあります。また、質問がクリックされる前にプラス記号が表示され、回答が表示されたときにマイナス記号が表示されるようにします。残念ながら、私のjqueryコードは、クリックされた質問だけでなく、すべての質問のプラス/マイナス記号を変更します. ここに私のコードがあります:

$('.trigger').click(function() {
   $(this).children('.hidden').toggle('slow', function() {
       if ($(this).is(':visible')) {
            $('li p a').children('.plus').hide();
            $('li p a').children('.minus').show();
        } else {
            $('li p a').children('.plus').show();
            $('li p a').children('.minus').hide();
        }
   });
    return false;
 });

そしてjsfiddleの例：

jsfiddle

4

2 に答える 2

2

現在のセレクター$('li p a')は、ドキュメント全体を検索して、段落の子である li の子であるアンカーを探します。.trigger要素内のみを検索していることを確認する必要があります。

http://api.jquery.com/find/を参照してください。

$('.trigger').click(function() {
   var trigger = $(this); // Store the clicked object in a variable and convert to jQuery object
   trigger.children('.hidden').toggle('slow', function() {
       if ($(this).is(':visible')) {
            trigger.find('.plus').hide(); // trigger.find() allows us to search using our CSS selector only within the trigger object.
            trigger.find('.minus').show();
        } else {
            trigger.find('.plus').show();
            trigger.find('.minus').hide();
        }
   });
    return false;
 });

http://jsfiddle.net/NYZa3/1/

次のように書くこともできます。

$('.trigger').click(function() {
   var trigger = $(this); // Store the clicked object in a variable and convert to jQuery object
   trigger.children('.hidden').toggle('slow', function() {
       trigger.find('.plus, .minus').toggle();
   });
   return false;
 });

http://jsfiddle.net/NYZa3/4/

または、全体を連鎖させることもできます (アニメーションの表示/非表示が完了した後ではなく、クリックするとすぐに.plusandが切り替わります)。.minus

$('.trigger').click(function() {
   $(this)
   .children('.hidden')
   .toggle('slow')
   .siblings('p')
   .find('.plus, .minus')
   .toggle();
    return false;
});

http://jsfiddle.net/NYZa3/5/

于 2013-03-10T16:21:55.227 に答える
2

ウィッチの「マイナス」と「プラス」が子であることを確認する必要があります。

$('.trigger').click(function() {
    var tis = $(this);
    tis.children('.hidden').toggle('slow', function() {
       if ($(this).is(':visible')) { // $(this) in "this" case is refer to the children!
            tis.find('.plus').hide();
            tis.find('.minus').show();
        } else {
            tis.find('.plus').show();
            tis.find('.minus').hide();
        }
   });
    return false;
 });

このコードをもっと明確にする必要があることはわかっていますが、うまく機能することはわかっています :-) JQuery アクションで多くのことを使用する場合は、常に DOM オブジェクトをキャッシュすることをお勧めします。非常に基本的なキャッシングは、一時変数を作成し、すべての DOM (ex $(this)) を内部に配置して、アクションのすべてのステップで使用できるようにすることです。

于 2013-03-10T16:19:22.727 に答える