jQuery関数のIF関数

Question

divにカーソルを置くと、オーバーフローチェックを実行しようとしています。しかし、私はホバー機能のためにjQueryを使用し、次の機能には単純なJavascriptがあります。 jQuery関数の中でif then関数を使うことができないと仮定しているので動作しませんが、if then関数を実行する必要があるという動作が必要です。誰かが私を助けることができますか？ =）

だから、jQueryの（ホバー） - > JS（オーバーフローをチェックしてください） - > jQueryの（ここで（DIVに追加します。 "...続きを読む..."））

HTML：

<div class="hover_cap"> 
<div class="hcd"> 
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum 
</div> 
</div> 

CSS：

.hover_cap { 
    width:150px; 
    max-height: 17.5ex; 
    border: 1px solid red; 
} 

.hcd { 
    line-height:2.5ex; 
    max-height:12.5ex; 
    margin: 10px; 
    border: 1px solid green; 
    overflow: hidden; 
} 

.readmore { 
    padding: 0px 10px 10px 10px; 
} 

JS：

$('.hover_cap').hover(

    if (function checkOverflow(hcd) { 
     var curOverflow = hcd.style.overflow; 

     if (!curOverflow || curOverflow === "hidden") hcd.style.overflow = "visible"; 

     var isOverflowing = hcd.clientWidth < hcd.scrollWidth || hcd.clientHeight < hcd.scrollHeight; 

     hcd.style.overflow = curOverflow; 

     return isOverflowing; 
    }) { 

    function() { 
     $(this).append($('<a>...read more...</a>')); 
    }, 
    function() { 
     $(this).find("a:last").remove(); 
    } 
    } 
} 

Answer 1

ここにあなたのスニペットがあります： 外側のdivをホバリングすると、内側のdivのテキストがオーバーフローしている場合、外側のdivに 'readmore'ボタンを追加します。 外側のdivをアンハーバーするときに、追加された 'readmore'ボタンがある場合は削除します。

function isOverflowed(element){ 
 
    return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth; 
 
} 
 

 
$(document).ready(function(){ 
 
    $('.hover_cap').hover(function(){ 
 
    var $this = $(this); 
 
    var $textContainer = $this.find('.hcd'); 
 
    $textContainer.css('overflow','auto'); 
 
    var isOverflowing = isOverflowed($textContainer[0]); 
 
    $textContainer.css('overflow','hidden'); 
 
    if(isOverflowing) { 
 
     $this.append($('<a>...read more...</a>')); 
 
    } 
 
    }, function(){ 
 
    var $this = $(this); 
 
    var lastA = $this.find("a:last"); 
 
    if(lastA) { 
 
     lastA.remove(); 
 
    } 
 
    }) 
 
})

.hover_cap { 
 
    width:150px; 
 
    max-height: 17.5ex; 
 
    border: 1px solid red; 
 
} 
 

 
.hcd { 
 
    line-height:2.5ex; 
 
    max-height:12.5ex; 
 
    margin: 10px; 
 
    border: 1px solid green; 
 
    overflow: hidden; 
 
} 
 

 
.readmore { 
 
    padding: 0px 10px 10px 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="hover_cap"> 
 
<div class="hcd"> 
 
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum 
 
</div> 
 
</div> 
 

 
<br/> 
 
<br/> 
 

 
<div class="hover_cap"> 
 
<div class="hcd"> 
 
Short text, no overflow 
 
</div> 
 
</div>