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>