6

コードは次のとおりです：http： //jsfiddle.net/t2nite/KCY8g/

私はjqueryを使用してこれらの隠しボックスを作成していました。

各ボックスには、いくつかのテキストと「表示」および「非表示」ボタンがあります。「SHOW/HIDEall」ボタンを作成しようとしています。

しかし、下部のコードを試してみると、ボタン全体が消えてしまいます。

$("#btn").toggle(function() {
   $(".para2, .para3, .para4").hide(200);
   $(".para2, .para3, .para4").show(200);
});

これは私が欲しいものに到達できる最も近いものです。

$("#btn").click(function() {
   $(".para2, .para3, .para4").toggle(200);
});

上のコードは機能しますが、すべてのボックスを非表示または表示する代わりに、非表示と表示を切り替えるだけです。ヘルプ。

コンテンツを非表示にしたいだけで、ボタンはパラクラス内にありません。

4

5 に答える 5

2

各要素をループして、それらが非表示になっているかどうかを確認する必要があります。最初にすべてを非表示にするか、すべて表示するかによって異なります。必要なものは次のとおりです。

// To toggle each element's state
$("#btn").click(function() {
   $(".para2, .para3, .para4").each(function (index, element) {
       if ($(this).is(':visible')) {
           $(this).hide(200);
       } else {
           $(this).show(200);
       }
   });
});

// To show all and hide all afterwards or vice-versa (change the attr check)
$("#btn").click(function() {
   if ($(this).attr('data-show')) {
       $(".para2, .para3, .para4").show(200);
       $(this).attr('data-show', false);
   } else {
       $(".para2, .para3, .para4").hide(200);
       $(this).attr('data-show', true);
   }
});

// To hide all if one is shown
$("#btn").click(function() {
   var oneShown = false;
   $(".para2, .para3, .para4").each(function (index, element) {
       if ($(this).is(':visible')) {
           oneShown = true;
       }
   });
   if (oneShown) {
       $(".para2, .para3, .para4").hide(200);
   } else {
       $(".para2, .para3, .para4").show(200);
   }
});
于 2012-10-15T20:51:28.690 に答える
0

イベントで両方のコールバックを使用したい：.toggle 

$("#btn").toggle(function() {
   $(".para2, .para3, .para4").hide(200);
}, function() {
   $(".para2, .para3, .para4").show(200);
});

フィドル： http： //jsfiddle.net/gromer/CDEMS/

私はあなたがそのように切り替えようとしていたものだと思いますか？

于 2012-10-15T20:52:55.770 に答える
0

私はあなたが必要としているのはこれだと思います：

$("#btn").data('tgl','hide').click(function() {
   if ($(this).data('tgl') == 'hide') {
      $(".para2, .para3, .para4").hide(200);
      $(this).data('tgl','show');
   } else {
      $(".para2, .para3, .para4").show(200);
      $(this).data('tgl','hide');
   }
});

作業デモを見る

于 2012-10-15T20:54:25.973 に答える
0

特定のIDを持つ要素ではなくクラスを使用するようにいくつかの変更を加えたので、これを動作ベースにすることができます（したがって、必要なコードが少なくなり、itsawrap要素の追加と削除が簡単になります）。

HTML：

<div id="showall"><button id="btn">HIDE/SHOW ALL</button></div>


<div class="itsawrap">
    <button class="hide">HIDE</button>
    <button class="show">SHOW</button>
    <p class="para2">"Who you callin' pinhead?"</p>
    <p id="btm" class="para2">- Patrick Star</p>
</div>

<div class="itsawrap">
    <button class="hide">HIDE</button>
    <button class="show">SHOW</button>
    <p class="para3">"He was a good man, what a rotten way to die."</p>
    <p id="btm" class="para3">- JC Denton</p>
</div>

<div class="itsawrap">
    <button class="hide">HIDE</button>
    <button class="show">SHOW</button>
    <p class="para4">"Wooooooooo!!"</p>
    <p id="btm" class="para4">- Ric Flair</p>
</div>

JS：

$("#btn")
    .data('shown', true)
    .click(function() {
    var mode = $(this).data('shown') ? 'hide' : 'show';
    $('.itsawrap p')[mode](200);
    $(this).data('shown', mode == 'show');
});

$('.itsawrap').on('click', '.hide', function() {
    $(this).parent().find('p').hide(200);
}).on('click', '.show', function() {
    $(this).parent().find('p').show(200);
});

jsFiddle

于 2012-10-15T20:55:58.097 に答える
0

ここでは、すべてのコードを3つのイベントにまとめることができます。このアプローチを試してください。

$("#btn").toggle(function() {
    $(".para2, .para3, .para4").hide(200);
}, function() {
    $(".para2, .para3, .para4").show(200);
});

$("[id^='hide']").click(function() {
    $(this).closest('div').find('p').hide(200);
});

$("[id^='show']").click(function() {
   $(this).closest('div').find('p').show(200);
    $('.itsawrap').not($(this).closest('div')).find('p').hide(200);
});

フィドルを確認してください

于 2012-10-15T21:03:34.260 に答える