Кнопка расширения Div для более длинного текста, но только одна кнопка

Question

Я использую пару div с одинаковыми классами. Теперь, когда один из элементов div содержит текст длиной более 150 символов, ему требуется кнопка расширения, чтобы развернуть элемент div.

Пока кнопка прикреплена к div, когда текст превышает 150 символов. Но когда я нажимаю на кнопку, div расширяется, но также и другой div расширяется и глючит.

Как я могу это исправить, чтобы раскрылся только div с нажатой кнопкой?

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

.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>

jquery

1

Rovi 5 Сен 2017 в 09:41

Answer 1

В вашем обработчике click item был последним .item-inner, определенным в цикле .each() ... Итак, последний столбец.

Использование $(this).parent(".item-inner") нацелит на правый столбец.

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

.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>

2

Louys Patrice Bessette 5 Сен 2017 в 06:51

Answer 2

Вам нужно выбрать ближайший .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>

2

Dij 5 Сен 2017 в 06:50

Answer 3

Не могли бы вы попробовать это? Просто найдите родительский div для нажатой кнопки и анимируйте.

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

.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>

0

SMA 5 Сен 2017 в 06:59

Answer 4

Вы не можете использовать $ (item) в событии нажатия кнопки. Вам нужно выбрать кнопку с $ (this) и затем перейти к ее родительскому элементу .item-inner

Попробуй это.

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

0

Shahbaz 5 Сен 2017 в 06:50

Кнопка расширения Div для более длинного текста, но только одна кнопка

4 ответа

Новые вопросы

jquery