javascript - jquery仅在一个类中显示更多功能目标p标签

Question

显示更多功能是错误的 P 标记，我不能在 p 标记中使用类，因为它来自数据库，所以我如何在类 contentclass 中定位 P 目标?

$(document).ready(function(){
if ($('p').length > 1) {
        $('p:gt(1)').hide('slow');
        $('.show-more').show('slow');
    }
    
    $('.show-more').on('click', function() {
        $('p:gt(1)').slideToggle('slow');
        $(this).html() == 'ReedMore +' ? $(this).html('Less -') : $(this).html('ReedMore +');
    });
    
    
    });

    .show-more {
      display: none;
      cursor: pointer;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="contentclass">
<p>Testing some of Text</p>
<p>SecondTesting some of Text</p>
<p>ThirdTesting some of Text</p>
<p>ThirdTesting some of Text</p>
<p>ThirdTesting some of Text</p>
<div class="show-more">ReedMore +</div>
</div><!-- <div class="contentclass"> -->

<!-- i Dont Want be Target the next P teags -->
<p style="color:red;">Testing Testing Confirm its target Only First Pargraph</p>
<p style="color:red;">Testing Testing Confirm its target Only First Pargraph</p>

Answer 1

由于您直接使用了p，因此您没有具体指定应用更改的位置。作为选择器，因此它对所有 p 进行更改在您的 html 中添加标签，这样您就可以添加 contentclass与 p标签 。
演示代码 :

//now only p tags which is inside content will get change
  if ($('.contentclass p').length > 1) {
    $('.contentclass  p:gt(1)').hide('slow');
    $('.show-more').show('slow');
  }

  $('.show-more').on('click', function() {
    $('.contentclass p:gt(1)').slideToggle('slow');
    $(this).html() == 'ReedMore +' ? $(this).html('Less -') : $(this).html('ReedMore +');
  });

.show-more {
  display: none;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="contentclass">
  <p>Testing some of Text</p>
  <p>SecondTesting some of Text</p>
  <p>ThirdTesting some of Text</p>
  <p>ThirdTesting some of Text</p>
  <p>ThirdTesting some of Text</p>
  <div class="show-more">ReedMore +</div>
</div>

<p style="color:red;">Testing Testing Confirm its target Only First Pargraph</p>
<p style="color:red;">Testing Testing Confirm its target Only First Pargraph</p>