Я использую пару 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>
4 ответа
В вашем обработчике 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>
Вам нужно выбрать ближайший .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>
Не могли бы вы попробовать это? Просто найдите родительский 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>
Вы не можете использовать $ (item) в событии нажатия кнопки. Вам нужно выбрать кнопку с $ (this) и затем перейти к ее родительскому элементу .item-inner
Попробуй это.
$(this).closest('.item-inner').animate({"height":"600px"}, 500);
Похожие вопросы
Новые вопросы
jquery
jQuery - это библиотека JavaScript, рассмотрите возможность добавления тега JavaScript. jQuery - это популярная кросс-браузерная библиотека JavaScript, которая облегчает прохождение Document Object Model (DOM), обработку событий, анимацию и взаимодействие AJAX, сводя к минимуму расхождения между браузерами. Вопрос с тегом jQuery должен быть связан с jQuery, поэтому jQuery должен использоваться в рассматриваемом коде, и в вопросе должны быть как минимум элементы, связанные с использованием jQuery.