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

DEMO

Answer 2

您正在根据类进行所有操作，该类在文档中多次出现。

您可以使用ID替换该类，或尝试something like this以便只影响一个范围。

Answer 3

因为saibamaisBtn表示按钮组，您将对所有span元素进行操作。通常你会这样写 -

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

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

显示和隐藏一些跨度文本

3 个答案: