홈>
동일한 클래스로 두 개의 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>
- 답변 # 1
- 답변 # 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>
트렌드
- OpenCv의 폴더에서 여러 이미지 읽기 (python)
- 파이썬 셀레늄 모든 "href"속성 가져 오기
- html - 자바 스크립트 - 클릭 후 변경 버튼 텍스트 변경
- javascript - 현재 URL에서 특정 div 만 새로 고침/새로 고침
- JSP에 대한 클래스를 컴파일 할 수 없습니다
- JavaScript 변수를 HTML div에 '출력'하는 방법
- git commit - 자식 - 로컬 커밋 된 파일에 대한 변경을 취소하는 방법
- jquery - JavaScript로 현재 세션 값을 얻으시겠습니까?
- javascript - swiperjs에서 정지, 재생 버튼 추가
- python - 화면에서 찾은 요소를 찾을 수없는 경우 셀레늄
당신의
click
에서핸들러,
item
마지막.item-inner
이었다.each()
에 정의 루프 ... 마지막 열입니다.$(this).parent(".item-inner")
사용 오른쪽 열을 타겟팅합니다.