홈>2020-02-01 01:22

jquery - 더 긴 텍스트를위한 Div 확장 버튼

동일한 클래스로 두 개의 div를 사용하고 있습니다. 이제 div 중 하나에 150자를 초과하는 텍스트가 포함되어 있으면 div를 확장하려면 확장 버튼이 필요합니다.

지금까지 텍스트가 150자를 넘으면 버튼이 div에 연결됩니다. 그러나 버튼을 클릭하면 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

당신의 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

가장 가까운 .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>

답변 # 3
버튼 클릭 이벤트에서 $(item)을 사용할 수 없습니다. $(this) 버튼을 선택한 다음 부모 .item-inner
로 이동해야합니다.
이것을 시도해보십시오.
```
$(this).closest('.item-inner').animate({"height":"600px"}, 500);
```

답변 # 4

이것을 시도해 주시겠습니까? 클릭 한 버튼의 부모 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>

Python2.net

jquery - 더 긴 텍스트를위한 Div 확장 버튼

관련 자료