jquery - 显示和隐藏一些跨度文本

Question

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

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.click(
    function() {
        $(this).closest('span.saibamais').slideToggle('fast');
    });

或者

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

演示

Answer 2

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

您可以用 ID 替换类，或尝试类似的方法，以便只影响一个跨度。

Answer 3

因为 saibamaisBtn 代表您正在对所有 span 元素执行操作的按钮组。通常你会这样写 -

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

这将隔离被单击的按钮并专注于 next() 中可用的跨度。