0

jqueryやjavascriptで複数のdivを隠して表示したい。Web を検索しましたが、次のような一意の div が必要なコードを見つけました。

<div id="div1">text</div>
<div id="div2">text</div>

などですが、foreache php 関数に div を追加したいので、複数の ID を持つことはできません。foreache は div ラッパーです。だから、私の質問はどうすればそれを行うことができますか?

編集私はJQueryの完全な初心者なので、何かを実装する方法がわからないので、これを持っています

    <div id="wrapper">
  <div class="title">
     <div class="hide"> Hidden Text</div>
  </div>
    </div>

タイトル div をクリックすると、class="hide" が表示されます。

解決：

    .box
{ margin:10px;
  height:auto;
}
.panel,.flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
.panel
{
padding:50px;
display:none;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".flip").click(function(){
    $(this).next().slideToggle(500);
  });
});
</script>

<div class="box">
     <h1>This is the div</h1>
  <div class="flip">If u click </div>
<div class="panel"> This will show</div>

問題は、divがforeach関数によって生成されたと言ったとおりで、これで解決しました。すべてに感謝します! 学ぶことがたくさんあります。

4

6 に答える 6

5

あなたが試すことができます

<div id="div1" class="toggle">text</div>
<div id="div2" class="toggle">text</div>

それで

$('.toggle').toggle();  //Automatic Display or hide the matched elements.
于 2012-10-24T11:48:37.090 に答える
3

共通クラスを割り当て、後でそのクラスセレクターを使用して、共通クラスで非表示の div を表示できます。

ライブデモ

<div id="div1" class="someclass">text</div>
<div id="div2" class="someclass">text</div>

 $('.someclass').show();
于 2012-10-24T11:46:59.747 に答える
1

それには 2 つの方法があります。

  • クラスごとに div を選択する
  • ラッパーの子 div を選択

最初の方法は、他のすべての人が説明したように、class 属性を追加して div を選択します。

<div class="hide">content</div>

と

$(".hide").hide();

2 番目の方法は、親 div に一意の ID を与えることです。

<div id="wrapper">
    <div>content</div>
    <div>content</div>
</div>

次に、タグ名ですべての子を選択します。

$("#wrapper div").hide();
于 2012-10-24T12:10:11.620 に答える
0

いくつかのクラスを追加して、非表示にするすべてのダイビングを選択します。

<div class="toHide" id="div1">text</div>
<div class="toHide" id="div2">text</div>

そして、それらをすべて非表示にします、

$('div .toHide').hide();
于 2012-10-24T11:48:19.233 に答える
0

解決策1

<div id="div1">text</div>
<div id="div2">text</div>

jQuery('#div1, #div2').hide();
jQuery('#div1, #div2').show();
jQuery('#div1, #div2').toggle();

解決策2

<div id="div1" class="some-div">text</div>
<div id="div2" class="some-div">text</div>

jQuery('.some-div').hide();
jQuery('.some-div').show();
jQuery('.some-div').toggle();
于 2012-10-24T11:48:49.673 に答える
0

別の答え：

親要素を使用します。

<div id="yourId">
   <div id="div1">text</div>
   <div id="div2">text</div>
</div>

$("#yourId div").hide();
于 2012-10-24T12:14:20.560 に答える