Div扩展按钮的文字较长，但只有一个按钮

Question

我使用了几个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>

Answer 1

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

使用$(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>

Answer 2

你需要的目标为最接近.item-inner您可以点击函数使用$(this).closest('.item-inner')的.item-extend是这样的：

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

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

Answer 3

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

试试这个。

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

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