Обработка переключенного клика с помощью JQuery

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) переключается между двумя функциями при нажатии на элемент.