一部のスパンテキストを表示して非表示にする

Question

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') 
      } 

      ); 

Answer 1

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

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

これは、クリックされたボタンを分離し、next（）で利用可能なスパンに焦点を当てます。

Answer 2

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

または

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

DEMO

Answer 3

ドキュメントに何度も現れるクラスに基づいてすべてを実行しています。

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