当我点击“更多+”按钮时，此代码将 div 的高度更改为自动。
我怎样才能只为我想要的 div 运行这个函数？
目前，当我单击“viwviewmori”按钮时，它适用于所有 div。
另一个问题是，当我第二次单击“viwviewmori”按钮时，我想再次将文本“... less -”更改为“more”。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div class="hidi">
<div class="uner-sch">
<input type="checkbox"/>
first
</div>
</div>
<div class="viwviewmori"> ... more +</div>
<div class="hidi">
<div class="uner-sch">
<input type="checkbox"/>
second
</div>
</div>
<div class="viwviewmori"> ... more +</div>
<script>
$(".viwviewmori").click(function(){
var el = $('.hidi'),
curHeight = el.height(),
autoHeight = el.css('height', 'auto').height();
el.height(curHeight).animate({height: autoHeight}, 1000),
$(this).text('... less -');
});
</script>
</body>
</html>
最佳答案
click处理函数将事件对象作为参数。
因此，您可以使用 event.target .
要更改文本，您可以使用:
el.text( (el.text().indexOf('more')> -1) ? '... less -' : '... more +');
$(function () {
$(".viwviewmori").click(function (e) {
var el = $(e.target),
hidi = el.prev('div.hidi'),
curHeight = hidi.height(),
autoHeight = hidi.css('height', 'auto').height() * ((el.text().indexOf('more') > -1) ? 3 : 1);
hidi.height(curHeight).animate({height: autoHeight}, 1000),
el.text(((el.text().indexOf('more') > -1) ? el.text().replace(/more \+$/g, 'less -') : el.text().replace(/less \-$/g, 'more +')));
});
});.viwviewmori {
width: 30%;
border:1px solid black;
}<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<div class="hidi">
<div class="uner-sch">
<input type="checkbox"/>
first
</div>
</div>
<div class="viwviewmori"> ... more +</div>
<div class="hidi">
<div class="uner-sch">
<input type="checkbox"/>
second
</div>
</div>
<div class="viwviewmori"> ... more +</div>关于javascript - 高度更改为自动适用于所有元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38307093/