0

リストビューの説明テキストを文字数に制限しようとしています。クリックすると残りの文字を切り替えるオプションがあります。テキストを制限することは問題ではありません。次のコードスニペットで機能しますhttp://jsfiddle.net/lgtsfiddler/G42dR/5/

$("p").each(function(i) {
    len = $(this).text().length;
    if (len > 150) {
        $(this).text($(this).html().substr(0, 150));
    }
});

ドロップダウンイベントを追加するにはどうすればよいですか？

4

2 に答える 2

2

これを行う1つの方法は、「プレビュー」部分とテキストの残りの部分を別々のスパンでラップすることです。次に、テキストの残りの部分を含むスパンを非表示にするか表示するかを切り替えるリンクを追加できます。

$(this).html("<span>" + $(this).text().substr(0,150) + "</span><span style='display:none'>" + $(this).text().substr(150) + "</span>");

var link = $("<a href='#' class='more'>More..</a>");
$(this).append(link);
$(link).click(function(){
    $(this).prev().toggle();
    $(this).html($(this).html()=="More.."?"Less":"More..");
});

デモ： http： //jsfiddle.net/G42dR/9/

于 2012-11-19T08:31:48.837 に答える
1

これはあなたを助けますか：

            $('p').each(function(){
                if($(this).text().length > 150){
                    $(this).attr('data-text', $(this).text());
                    $(this).text($(this).text().substring(0, 150));
                    $(this).after($('<a onclick="$(this).prev().text($(this).prev().attr(\'data-text\')); $(this).remove();"> Read more...</a>'));
                }
            });
于 2012-11-19T08:37:52.113 に答える