Div扩展按钮用于较长的文本，但只有一个按钮

Question

我使用了几个具有相同课程的div。 现在当其中一个div包含超过150个字符的文本时，需要一个扩展按钮来展开div。

到目前为止，当文本超过150个字符时，按钮会附加到div。但是，当我单击按钮时，div会扩展，但另一个div会扩展并且有问题。

如何解决此问题，以便只有带有点击按钮的div才会展开？

＆＃13;

＆＃13;

jQuery(document).ready(function($) {
  var limit = 150;
  var i = $('.item .item-inner');
  $(i).each(function(){
    var text = $(this).find('.item-content').text();
    if (text.length > limit) {
      limit = text.length;
      item = this;
      $(item).append('<button class="item-extend">expand</button>');
    }
  });
  $('.item-extend').click(function () {
    $(item).animate({"height":"600px"}, 500);
  }, function () {
    $(item).animate({"height":"300px"}, 300);
  });
});

＆＃13;

.item {
  float:left;
  width:25%;
}
.item-inner {
  background: #ccc;
  padding:10px;
  margin:10px;
  height:200px;
  overflow:hidden;
}
.item-extend {
  position:absolute;
  bottom:10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
  <div class="item-inner">
    <p class="item-content">Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem</p>
  </div>
</div>
<div class="item">
  <div class="item-inner">
    <p class="item-content">Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet</p>
  </div>
</div>
<div class="item">
  <div class="item-inner">
    <p class="item-content">Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit</p>
  </div>
</div>
<div class="item">
  <div class="item-inner">
    <p class="item-content">Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet Lorem ipsum dolor sit </p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要定位最近的.item-inner，以便在$(this).closest('.item-inner')点击处理程序.item-extend中使用jQuery(document).ready(function($) { var limit = 150; var i = $('.item .item-inner'); $(i).each(function(){ var text = $(this).find('.item-content').text(); if (text.length > limit) { limit = text.length; item = this; $(item).append('<button class="item-extend">expand</button>'); } }); $('.item-extend').click(function () { $(this).closest('.item-inner').animate({"height":"600px"}, 500); }); });：

.item {
float:left;
width:25%;
}
.item-inner {
background: #ccc;
padding:10px;
margin:10px;
height:200px;
overflow:hidden;
}
.item-extend {
  position:absolute;
  bottom:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
  <div class="item-inner">
  <p class="item-content">Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem</p>
  </div>
</div>
<div class="item">
  <div class="item-inner">
  <p class="item-content">Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet</p>
  </div>
</div>
<div class="item">
  <div class="item-inner">
  <p class="item-content">Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit</p>
  </div>
</div>
<div class="item">
  <div class="item-inner">
  <p class="item-content">Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet Lorem ipsum dolor sit </p>
  </div>
</div>

module

Answer 2

在click处理程序中，item是.item-inner循环中定义的最后一个.each() ...所以最后一列。

使用$(this).parent(".item-inner")将定位右列。

＆＃13;

＆＃13;

jQuery(document).ready(function($) {
  var limit = 150;
  var i = $('.item .item-inner');
  $(i).each(function(){
    var text = $(this).find('.item-content').text();
    if (text.length > limit) {
      limit = text.length;
      item = this;
      $(item).append('<button class="item-extend">expand</button>');
    }
  });
  $('.item-extend').click(function () {
    $(this).parent(".item-inner").animate({"height":"600px"}, 500);
  }, function () {
    $(this).parent(".item-inner").animate({"height":"300px"}, 300);
  });
});

＆＃13;

.item {
  float:left;
  width:25%;
}
.item-inner {
  background: #ccc;
  padding:10px;
  margin:10px;
  height:200px;
  overflow:hidden;
}
.item-extend {
  position:absolute;
  bottom:10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
  <div class="item-inner">
    <p class="item-content">Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem</p>
  </div>
</div>
<div class="item">
  <div class="item-inner">
    <p class="item-content">Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet</p>
  </div>
</div>
<div class="item">
  <div class="item-inner">
    <p class="item-content">Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit</p>
  </div>
</div>
<div class="item">
  <div class="item-inner">
    <p class="item-content">Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet Lorem ipsum dolor sit </p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

你不能在按钮点击事件中使用$（item）。您需要选择带有$（this）的按钮，然后遍历其父.item-inner

试试这个。

$(this).closest('.item-inner').animate({"height":"600px"}, 500);

Answer 4

你可以尝试一下吗？只需找到单击按钮和动画的父div。

＆＃13;

＆＃13;

jQuery(document).ready(function($) {
  var limit = 150;
  var i = $('.item .item-inner');
  $(i).each(function(){
    var text = $(this).find('.item-content').text();
    if (text.length > limit) {
      limit = text.length;
      item = this;
      $(item).append('<button class="item-extend">expand</button>');
    }
  });
  $('.item-extend').click(function () {
    $(this).parent('div').animate({"height":"600px"}, 500);
  }, function () {
    $(this).parent('div').animate({"height":"300px"}, 300);
  });
});

＆＃13;

.item {
  float:left;
  width:25%;
}
.item-inner {
  background: #ccc;
  padding:10px;
  margin:10px;
  height:200px;
  overflow:hidden;
}
.item-extend {
  position:absolute;
  bottom:10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
  <div class="item-inner">
    <p class="item-content">Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem</p>
  </div>
</div>
<div class="item">
  <div class="item-inner">
    <p class="item-content">Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet</p>
  </div>
</div>
<div class="item">
  <div class="item-inner">
    <p class="item-content">Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit</p>
  </div>
</div>
<div class="item">
  <div class="item-inner">
    <p class="item-content">Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet Lorem ipsum dolor sit </p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;