Jquery 显示和隐藏一些跨距文本

我刚刚开始编程和学习Jquery，我正在尝试构建一个简单的显示/隐藏文本按钮，实际上我几乎成功了，但问题是我有两个按钮和两个文本要显示/隐藏，但当我单击其中一个按钮时，两个文本都显示/隐藏。这是我的密码：

HTML:

或

---

您所做的一切都基于一个类，该类在文档中多次出现

---

您可以用ID替换该类，或者尝试只影响一个span。

因为saibamaisBtn代表您在所有span元素上获得操作的按钮组。通常你会这样写-

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

---

这将隔离已单击的按钮，并将重点放在next（）中可用的范围上。

按钮元素在HTML中的位置？而且，您似乎已经复制了相同的HTML两次

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

            );

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

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

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