Question

我有一段文本，希望能显示成截断状态，但当点击时会展开显示其余部分。再次点击应该会截断它。

我正在尝试使用onclick事件来处理此事，如下所示（警告：在未阅读以下内容的情况下不要运行以下代码...）：

<span id= blah  onclick= showAllComment("this is a long comment to see it all", 9, true ) >this is a...</span>

<script>
function showAllComment( comment, shortCommentLen, showFullComment )
{
    alert( $("#blah").html() );

    if( showFullComment )
    {
        $("#blah").html( comment );
        $("#blah").click( showAllComment( comment, shortCommentLen, false ) );
    }
    else
    {
        $("#blah").html( comment.substring( 0, shortCommentLen ) + "..." );
        $("#blah").click( showAllComment( comment, shortCommentLen, true ) );
    }
}
</script>

但是你会发现，它会反复调用自身，你必须结束浏览器的任务（因此在运行此代码时要小心！！！）

有人能否建议为什么会发生这种情况，以及如何解决它。

提前感谢您

Answer 1

这是因为您正在递归调用showAllComment函数。

尝试像这样做：

function showAllComment( comment, shortCommentLen, showFullComment )
{
    alert( $("#blah").html() );

    if( showFullComment )
    {
        $("#blah").html( comment );
        $("#blah").click( function () { showAllComment(comment, shortCommentLen, false);} );
    }
    else
    {
        $("#blah").html( comment.substring( 0, shortCommentLen ) + "..." );
        $("#blah").click( function () {showAllComment( comment, shortCommentLen, true );} );
    }
}

这样你就将调用封装在一个匿名函数中，所以只有当你单击#bla元素时才会执行。

Answer 2

未启用JavaScript的用户将无法阅读评论。更好的方法是在中包含整个评论，并在页面加载时使用JavaScript截断它。

JavaScript:

$(function() {
    $(".blah").each( function() {
        var shortCommentLen = 9;
        var comment = $(this).html();                   
        $(this).html(shortComment(comment, shortCommentLen));
        $(this).toggle(
            function() { $(this).html(comment); },
            function() { $(this).html(shortComment(comment, shortCommentLen)); }
        );

        function shortComment(comment, shortCommentLen) {
            return comment.substring( 0, shortCommentLen ) + "...";
        }
    });
});

HTML：

<span class= blah >this is a long comment to see it all</span>

当元素被点击时，toggle(fn1, fn2) 函数在两个函数之间进行交替。

友情链接