1

プログラミングとJqueryの学習を始めたばかりで、単純なテキストの表示/非表示ボタンを作成しようとしていますが、実際にはほとんど成功しましたが、問題は、表示/非表示する2つのボタンと2つのテキストがあることですが、クリックするといずれかのボタンで両方のテキストを表示/非表示にします。ここに私のコードがあります:

HTML:

<div class="mestre">
    <h2>Title</h2>
    <p>some text</p> 
 <h4>Saiba mais</h4><--the button -->
   <span class="saibamais">hidden text</span></div>
<div class="mestre">
    <h2>Title</h2>
    <p>some text</p> 
 <h4>Saiba mais</h4><--the button -->
   <span class="saibamais">hidden text</span></div>

JS

 var saibamaisBtn = $('#conteudo div.mestre h4');
    saibamais = $('#conteudo div.mestre span.saibamais');

       $(function(){ 
saibamais.css('display', 'none');
  });

 saibamaisBtn.hover(function(){
   var $this = $(this);
         $this.css('text-decoration', 'none');


},  function(){
    $(this).css('text-decoration', 'underline');

});

   saibamaisBtn.click(
    function() {
        saibamaisBtn.next('span').slideToggle('fast')
            }

            );
4

3 に答える 3

3 
saibamaisBtn.click(
    function() {
        $(this).closest('span.saibamais').slideToggle('fast');
    });

また

saibamaisBtn.on('click', 
    function() {
        $(this).next('span.saibamais').slideToggle('fast');
    });​

デモ

于 2012-05-04T12:51:18.080 に答える
0

ドキュメント内で複数回発生するクラスに基づいてすべてを実行しています。

クラスを ID に置き換えるか、このようなことを試して、1 つのスパンだけが影響を受けるようにすることができます。

于 2012-05-04T12:52:13.243 に答える
0

saibamaisBtn はボタンのグループを表すため、すべてのスパン要素でアクションを取得しています。通常は、次のように記述します。

$('#conteudo div.mestre h4').click(function() {
    $(this).next('span').slideToggle('fast');
});

これにより、クリックされたボタンが分離され、next() で使用可能なスパンに焦点が当てられます。

于 2012-05-04T12:53:03.117 に答える