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的用户将无法阅读评论。更好的方法是将整个注释包含在span中，并在页面加载时使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)函数在单击元素时在两个函数之间进行间隔。

使用JQuery处理切换的onclick

2 个答案: