0

約 50 個の p タグがあり、これらの横に 50 個の div があります。各 p タグをクリックすると、その div が表示され、残りは非表示になります。どうすればこれを達成できますか。以下のようなものを使用できます。

$(function() {
  $('.p1').click(function(){
  $('.div1').show();
  $('.div2','.div3','.div4','.div5','.div6',.........,'.div50').hide()
})
$('.p2').click(function(){
  $('.div2').show();
  $('.div1','.div3','.div4','.div5','.div6',.........,'.div50').hide()
})
//////////////
//////
})

しかし、おわかりのように、これは効率的な解決策ではありません。ここでjqueryをどのようeachに活用できるか、または配列を使用してこの実装をどのように行うことができるかもわかりません。誰かが私を正しい方向に向けることができますか？関数を使用して、その no を渡す必要があると思います。パラメータとしてですが、jqueryでカスタム関数を使用する方法がわかりません。

アップデート：

これは私がやったことです

$(function() {
        $('.p1').click(function() {
            $('.div').hide();
            $('.d1').show();
        })
    })

クラス div を 50 のすべての div に追加し、p1 のクリックで d1 を表示しています。50まで各インスタンスを1つ置き換えるにはどうすればよいですか。

4

5 に答える 5

4

私はすべてに共通のクラスを持ちdiv、pハンドラーとのバインディングhideが簡単になるようにします。div については、データタグをそれぞれに関連付けて、各タグをpリンクします。pdiv 

<p class="p1 pclass" data-showdiv="div1">
 ...
</p>
<p class="p2 pclass" data-showdiv="div2">
..

<div class="mydiv div1" ..>
..
</div>
<div class="mydiv div2" ..>
..
</div>

スクリプトは次のようになります。

$(function() {
  $('.pclass').click(function(){
     $('.mydiv').hide();
     $('.' + $(this).data('showdiv')).show();
  });
});
于 2012-05-17T17:31:48.763 に答える
1

ジェイソンが言ったように、

これを使って

$('p').click(function() {
    $('div').hide();
    $(this).next('div').show();
});

divが各段落の隣にある場合。

ただし、 と の間に要素があるpと機能しませdivん。

あなたの問題のために、あなたはできる、

$('p').click(function() {
        $('div').hide();
        var divClass = $(this).attr("class").replace('p','div');
        $('.' + divClass).show();
    });

p1、p2....パラグラフクラスにのみある場合;)

アップデート

このフィドルを参照してください

との間に<br>タグがあることに注意してください。<p><div>

于 2012-05-17T17:40:51.130 に答える
0

jQueryclickイベントは、セレクターに一致するすべての要素に自動的に登録されるため、このメソッドを使用する必要はありませんeach()。このトグル動作を持つ要素とプライマリ (つまり、親がクリックされたときに表示される)要素を区別するために、2 つの CSS クラスを用意することをお勧めします。

マークアップ:

<body>
  <p class="togglable">
    <div class="primary">
      This is the primary div that will be shown when our parent is clicked.
    </div>
    <div>Regular div child</div>
    <p>Nested paragraph</p>
    <ul>
      <li>A list perhaps</li>
    </ul>
  </p>

  <p class="togglable">
    <div class="primary">
      This is the primary div that will be shown when our parent is clicked.
    </div>
    <div>Regular div child</div>
    <p>Nested paragraph</p>
    <ul>
      <li>A list perhaps</li>
    </ul>
  </p>

  <p>This is a normal paragraph</p>
</body>

コード：

$(function () {
  $('.togglable').click(function () {
    // hide all our children
    $(this).children().hide();
    // now only show our primary chlid
    // NOTE: we pass 'this' as the second argument
    // so that the selector will only apply to the
    // children of the element that was clicked
    // (i.e. we are providing a custom context for the selector).
    $('.primary', this).show();     

    // You could even use the position of the child as well:
    // $(this).children().first().show();   
    // This will show the first child element.
  });
});

この例では、クラスtogglableを持つすべての要素は、クリックするとプライマリ子要素を表示し、他のすべての子要素を非表示にします。

于 2012-05-17T17:54:39.893 に答える
0

あなたのHTML構造が

<p>Some text</p>
<div>More text to hide and show</div>
<p>Some text</p>
<div>More text to hide and show</div>
<p>Some text</p>
<div>More text to hide and show</div>
....

$(function(){});メソッドで次を使用します。

$('p').click(function() {
    $('div').hide();
    $(this).next('div').show();
});
于 2012-05-17T17:29:08.520 に答える
0 
var dvs = ['.div1','.div2','.div3','.div4','.div5','.div6',.........,'.div50'];

$('p').click(function() {
    var index = parseInt(this.className.replace('p','')) - 1;
    $(dvs[index]).show();
    $(dvs.join(', ')).not(dvs[index]).hide();
});
于 2012-05-17T17:35:43.957 に答える