すべての要素の高さをautoに変更する

このコードは、「more +」ボタンをクリックすると、divの高さをautoに変更します。すべての要素の高さをautoに変更する

この機能は、どのように私が必要とするdivにのみ実行できますか？

現在、「viwviewmori」ボタンをクリックすると、すべてのdivで機能します。

もう1つの問題は、「viwviewmori」ボタンを2回目にクリックしたときに、「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>

出典

2016-07-11 inaz

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>

出典

2016-07-11 12:45:44 gaetanoM

divの高さは変わりませんか？ – inaz

更新されたコードは、より多くの高さを変更する..私はclassname（hidi）の高さを変更したい – inaz

@inazスニペットが更新されました。 – gaetanoM

あなたはそれがために変更することができます。

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

これはあなただけ.hidiクリックdivの内側に選択できます。

出典

2016-07-11 12:37:41

私は、クリック上の各div要素の高さを変更したいが、それは動作しません。 – inaz

すべての要素の高さをautoに変更する

答えて

関連する問題