如何切换显示/隐藏文本，在多个元素上使用相同的代码

How can I use the same jquery code, to show/hide text on all my elements, but only affecting the one is click reed more. So multiple of them doesn't open when I click on one.

我如何使用相同的jquery代码，在我的所有元素上显示/隐藏文本，但只影响一个是单击reed更多。因此当我点击一个时，它们中的多个不会打开。

$(document).ready(function(){
  $( ".showBtn " ).click(function() { 
    $(".textHidden").toggleClass("textShow");    
  }); 
});

.textHidden {
  display:none;
  transition:ease-in-out 1s;
  cursor:pointer;
}

.textShow {
  display:block;  
}

 <script src="http://code.jquery.com/jquery.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
  <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at eros quis nunc varius volutpat. Integer eu mattis nibh, quis convallis justo. Praesent ut lacinia ex, et vulputate elit. Vivamus nec quam mi.<strong class="showBtn ">reed more</strong>
  </p>
  <p class="textHidden">
Fusce rhoncus euismod pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In eu venenatis leo. Mauris id elit vel diam interdum tincidunt. Etiam consequat condimentum elementum. Vestibulum luctus risus felis, in mollis nisl hendrerit sed. Sed volutpat leo ut neque posuere, vel dignissim ante hendrerit. Ut et interdum tortor, ac pulvinar lacus. Nulla interdum eros id malesuada efficitur. Praesent semper odio sit amet fermentum feugiat. Donec laoreet, libero a convallis vehicula, tellus tortor molestie ante, id porta nunc risus et justo. Mauris bibendum sapien eu dui ultricies elementum. 
  </p>
</div>

<div style="background-color:red;">
  <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at eros quis nunc varius volutpat. Integer eu mattis nibh, quis convallis justo. Praesent ut lacinia ex, et vulputate elit. Vivamus nec quam mi.<strong class="showBtn ">Læs mere</strong>
  </p>
  <p class="textHidden">
Fusce rhoncus euismod pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In eu venenatis leo. Mauris id elit vel diam interdum tincidunt. Etiam consequat condimentum elementum. Vestibulum luctus risus felis, in mollis nisl hendrerit sed. Sed volutpat leo ut neque posuere, vel dignissim ante hendrerit. Ut et interdum tortor, ac pulvinar lacus. Nulla interdum eros id malesuada efficitur. Praesent semper odio sit amet fermentum feugiat. Donec laoreet, libero a convallis vehicula, tellus tortor molestie ante, id porta nunc risus et justo. Mauris bibendum sapien eu dui ultricies elementum.
  </p>
</div>

1 个解决方案

#1

There are multiple options to do so.

有多种选择可以做到这一点。

This is one of them:

这是其中之一：

$(document).ready(function(){
  $( ".showBtn " ).click(function() { 
    $(this).parents('div').first().find(".textHidden").toggleClass("textShow"); 
  }); 
});

.textHidden {
  display:none;
  transition:ease-in-out 1s;
  cursor:pointer;
}

.textShow {
  display:block;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
  <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at eros quis nunc varius volutpat. Integer eu mattis nibh, quis convallis justo. Praesent ut lacinia ex, et vulputate elit. Vivamus nec quam mi.<strong class="showBtn ">reed more</strong>
  </p>
  <p class="textHidden">
Fusce rhoncus euismod pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In eu venenatis leo. Mauris id elit vel diam interdum tincidunt. Etiam consequat condimentum elementum. Vestibulum luctus risus felis, in mollis nisl hendrerit sed. Sed volutpat leo ut neque posuere, vel dignissim ante hendrerit. Ut et interdum tortor, ac pulvinar lacus. Nulla interdum eros id malesuada efficitur. Praesent semper odio sit amet fermentum feugiat. Donec laoreet, libero a convallis vehicula, tellus tortor molestie ante, id porta nunc risus et justo. Mauris bibendum sapien eu dui ultricies elementum. 
  </p>
</div>

<div style="background-color:red;">
  <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at eros quis nunc varius volutpat. Integer eu mattis nibh, quis convallis justo. Praesent ut lacinia ex, et vulputate elit. Vivamus nec quam mi.<strong class="showBtn ">Læs mere</strong>
  </p>
  <p class="textHidden">
Fusce rhoncus euismod pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In eu venenatis leo. Mauris id elit vel diam interdum tincidunt. Etiam consequat condimentum elementum. Vestibulum luctus risus felis, in mollis nisl hendrerit sed. Sed volutpat leo ut neque posuere, vel dignissim ante hendrerit. Ut et interdum tortor, ac pulvinar lacus. Nulla interdum eros id malesuada efficitur. Praesent semper odio sit amet fermentum feugiat. Donec laoreet, libero a convallis vehicula, tellus tortor molestie ante, id porta nunc risus et justo. Mauris bibendum sapien eu dui ultricies elementum.
  </p>
</div>

Find the div parent, take the first one, find the hidden element inside it and toggle it's class.

找到div父级，取第一个，找到其中的隐藏元素并切换它的类。

Second option you got - take the parent of the current element, find the next-sibling which is hidden:

你得到的第二个选项 - 获取当前元素的父元素，找到隐藏的下一个兄弟：

$(document).ready(function(){
  $( ".showBtn " ).click(function() { 
    $(this).parent().next(".textHidden").toggleClass("textShow"); 
  }); 
});

.textHidden {
  display:none;
  transition:ease-in-out 1s;
  cursor:pointer;
}

.textShow {
  display:block;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
  <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at eros quis nunc varius volutpat. Integer eu mattis nibh, quis convallis justo. Praesent ut lacinia ex, et vulputate elit. Vivamus nec quam mi.<strong class="showBtn ">reed more</strong>
  </p>
  <p class="textHidden">
Fusce rhoncus euismod pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In eu venenatis leo. Mauris id elit vel diam interdum tincidunt. Etiam consequat condimentum elementum. Vestibulum luctus risus felis, in mollis nisl hendrerit sed. Sed volutpat leo ut neque posuere, vel dignissim ante hendrerit. Ut et interdum tortor, ac pulvinar lacus. Nulla interdum eros id malesuada efficitur. Praesent semper odio sit amet fermentum feugiat. Donec laoreet, libero a convallis vehicula, tellus tortor molestie ante, id porta nunc risus et justo. Mauris bibendum sapien eu dui ultricies elementum. 
  </p>
</div>

<div style="background-color:red;">
  <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at eros quis nunc varius volutpat. Integer eu mattis nibh, quis convallis justo. Praesent ut lacinia ex, et vulputate elit. Vivamus nec quam mi.<strong class="showBtn ">Læs mere</strong>
  </p>
  <p class="textHidden">
Fusce rhoncus euismod pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In eu venenatis leo. Mauris id elit vel diam interdum tincidunt. Etiam consequat condimentum elementum. Vestibulum luctus risus felis, in mollis nisl hendrerit sed. Sed volutpat leo ut neque posuere, vel dignissim ante hendrerit. Ut et interdum tortor, ac pulvinar lacus. Nulla interdum eros id malesuada efficitur. Praesent semper odio sit amet fermentum feugiat. Donec laoreet, libero a convallis vehicula, tellus tortor molestie ante, id porta nunc risus et justo. Mauris bibendum sapien eu dui ultricies elementum.
  </p>
</div>