2

コメント div 内の HTML タグに問題があり、タグを挿入してもテキスト リンクが表示されません<p>something</p>。プレーンテキストで問題なく動作します。リッチ テキストを挿入したいのですが、うまくいきません。

HTML

<div id="header">
<H2>
    Dynamically shortened Text with Show More link using jQuery
</H2>
</div>
<p>Click here to view the Tutorial: <a href="http://viralpatel.net/blogs/2010/12/dynamically-shortened-text-show-more-link-jquery.html">Shortened Text with Show More link</a></p>

<br/>
<div class="comment more">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Vestibulum laoreet, nunc eget laoreet sagittis,
    quam ligula sodales orci, congue imperdiet eros tortor ac lectus.
    Duis eget nisl orci. Aliquam mattis purus non mauris
    blandit id luctus felis convallis.
    Integer varius egestas vestibulum.
    Nullam a dolor arcu, ac tempor elit. Donec.</p>
</div>
<div class="comment more">
    Duis nisl nibh, egestas at fermentum at, viverra et purus.
    Maecenas lobortis odio id sapien facilisis elementum.
    Curabitur et magna justo, et gravida augue.
    Sed tristique pellentesque arcu quis tempor.
</div>
<div class="comment more">
    consectetur adipiscing elit. Proin blandit nunc sed sem dictum id feugiat quam blandit.
    Donec nec sem sed arcu interdum commodo ac ac diam. Donec consequat semper rutrum.
    Vestibulum et mauris elit. Vestibulum mauris lacus, ultricies.
</div>

CSS

body, input{
    font-family: Calibri, Arial;
    margin: 0px;
    padding: 0px;
}
a {
    color: #0254EB
}
a:visited {
    color: #0254EB
}
#header h2 {
    color: white;
    background-color: #00A1E6;
    margin:0px;
    padding: 5px;
}
.comment {
    width: 400px;
    background-color: #f0f0f0;
    margin: 10px;
}
a.morelink {
    text-decoration:none;
    outline: none;
}
.morecontent span {
    display: none;

}

Javascript

$(document).ready(function() {
    var showChar = 100;
    var ellipsestext = "...";
    var moretext = "more";
    var lesstext = "less";
    $('.more').each(function() {
        var content = $(this).html();

        if(content.length > showChar) {

            var c = content.substr(0, showChar);
            var h = content.substr(showChar-1, content.length - showChar);

            var html = c + '<span class="moreelipses">'+ellipsestext+'</span>&nbsp;<span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">'+moretext+'</a></span>';

            $(this).html(html);
        }

    });

    $(".morelink").click(function(){
        if($(this).hasClass("less")) {
            $(this).removeClass("less");
            $(this).html(moretext);
        } else {
            $(this).addClass("less");
            $(this).html(lesstext);
        }
        $(this).parent().prev().toggle();
        $(this).prev().toggle();
        return false;
    });
});

ここでjsFiddle

どんな助けでも大歓迎です。

4

2 に答える 2

0

プラグイン版（新機能）：

$.fn.showHideParagraph = function(settings){
    var config = $.extend({},  $.fn.showHideParagraph.config, settings);
    $(this).on({click: function () {
        var $this = $(this);
        if ($this.hasClass('less')) {
            $this.removeClass('less').html(config.moreText);
        } else {
            $this.addClass('less').html(config.lessText);
        }

        $this.parent().siblings('p:not(:first)').animate({opacity: 'toggle', height: 'toggle'});
        return false;
    }
    }, '.morePLink');

    return this.each(function () {
        var $this = $(this);
        if($this.hasClass("shortenedP")) return;

        $this.addClass("shortenedP");
        var paragraphs = $this.children('p');
        if (paragraphs.length > config.paragraphShowed) {
            paragraphs.not(":first").hide();

            paragraphs.first().append(" ...");
            var moreLess = '<span><a href="#" class="morePLink">'  + config.moreText + '</a></span>';
            $this.append(moreLess);
        }
    });
};

$.fn.showHideParagraph.config = {
    paragraphShowed: 1,
    ellipsesText: "...",
    moreText: 'more',
    lessText: 'less'
};

これは p をサポートし、表示された p の数を構成できます。

フィドル: http://jsfiddle.net/544HN/

于 2014-08-05T14:33:12.857 に答える
0

取っているからですvar content = $(this).html();。html には<p>and があり、substr を取得すると、終了タグのない不正な形式の html になります (例: <p>Some Text)。ブラウザーが異なれば、不正な html の処理方法も異なります。あなたのmorelinkリンクはの外側に置かれ<p>、トグルはそれを隠してしまいます。代わりに使用var content = $(this).text();するか、これをより適切に処理するプラグインを見つけてください。

于 2013-03-28T12:08:24.383 に答える