Question

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

jQuery(document).ready(function($) {

if ( $('p').length < 1 ) { 

$('p:last-child').after('<div id="toggle" class="btn">Read More</div>');

$('p').not('.entry-content p:first-child').wrap('<div class="text" />');  

}

$("#toggle").click(function() {

    var elem = $("#toggle").text();

    if (elem == "Read More") {

      $("#toggle").text("Read Less");
      $("#text").slideDown("slow");

    } else {

      $("#toggle").text("Read More");
      $("#text").slideUp("fast");
    }

  }); });



<p>This is an example of a post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.</p>

<p>This is an example of a post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.</p>

<p>This is an example of a post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.</p>

如果有2段或更多段落，我只想在第一段之后添加按钮。

jQuery在第1段之后添加了按钮。如果每篇文章中只有1段文字，我不想添加它。我只想在至少有2段时添加它。

更新：基本上，如果只有1个段落，我不需要运行任何jQuery，所以我想我只需要一个条件。

更新2：像这样但是对于段落http://jsfiddle.net/RyqJ9/

Answer 1

您必须使用$(".text").each(function()和if((textBox.find('p').length)>1)检查每个文本div的条件，以便如果有两个或更多p，那么您将显示该文本div的按钮

以下是示例代码。

＆＃13;

$(document).ready(function(){
  $(".content .entry-content").each(function(){
  var contentBox = $(this);
  if (contentBox.find('p').length > 1){ 
    var lastOne = contentBox.find('p').length - 1;
    contentBox.append('<div id="toggle" class="btn">Read More</div>');
    $('.content .entry-content p').not('.entry-content p:first-child').wrap('<div class="text" />');  
    contentBox.find(".text").hide();
    contentBox.find(".btn").click(function(){
      if($(this).attr('class').indexOf('btnDown')==-1){
        contentBox.find(".text").slideDown("slow");
        $(this).addClass("btnDown");
        $(this).html("Read Less");
      }else{
        contentBox.find(".text").slideUp("slow");
        $(this).removeClass("btnDown");
        $(this).html("Read More");
      }
    });
  }
});
});

＆＃13;

.text{
  background-color:green;
  margin:5px 0;
}
.btn{
  background-color:red;
}
.content{
  border:2px solid black;
  margin:5px 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<div class="entry-content">
<p>This is an example of a post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.</p>

<p>This is an example of a post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.</p>

<p>This is an example of a post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.</p>
</div>
</div>

<div class="content">
<div class="entry-content">
<p>This is an example of a post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.</p>

<p>This is an example of a post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.</p>

<p>This is an example of a post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.</p>
</div>
</div>

<div class="content">
<div class="entry-content">
<p>This is an example of a post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.</p>
</div>
</div>

＆＃13;

Answer 2

你尝试过这样的事情（未经测试）吗？或者，如果您尝试将其附加到段落的底部而不是之后，请使用append()代替after()。

$(function($) {
  if($('p:nth-child(2)').length) {
    $('p:first-child').after('<div id="toggle" class="btn">Read More</div>');
  }
});

仅在1段后插入按钮如果有2个或更多段落

2 个答案: