Question

当我点击＆＃34;更多+＆＃34;时，此代码会将div的高度更改为auto。按钮。

如何仅为我想要的div运行此功能？

当我点击＆＃34; viwviewmori＆＃34;当前它适用于所有div。按钮。

另一个问题是当我点击＆＃34; viwviewmori＆＃34;按钮第二次，我想改变文字＆＃34; ... less - ＆＃34;更多＆＃34;更多＆＃34;试。

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

Answer 1

click处理程序函数将事件Object作为参数。

因此，您可以使用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>

Answer 2

您可以将其更改为：

 var el = $(this).find('.hidi');

这将允许您在单击的div中仅选择.hidi。

高度更改为自动适用于所有元素

2 个答案: