Question

如果文本内容超过3个字符，我已经编写了javascript，它只显示了3个文本字符。

//var msg = $('.message-content').children('p');
var msg = $('.message-content').text();

if(msg.length >3){
    $(".message-content").html(msg.substring(0,3));
    $( ".more-hidden" ).html( msg.substring(3)).hide();
    $(".readmore").css("visibility", 'visible');
    $(".message-content").css("float", 'left');
}

 $('.readmore').click(function(e){
    e.preventDefault();
    $('.more-hidden').slideToggle();
    $(this).text( $(this).text() == '... Read More' ? "Show Less" : "... Read More");
});

点击＆＃34;显示更多＆＃34;链接，显示整个文本。见fiddle。这很好。

现在的问题是用户动态添加<div class="message-content">some commit </div>。我的问题是：如何为所有<div class="message-content">some commit </div>应用相同的功能？

Answer 1

您需要再次运行该批代码才能将其应用于新元素。您可以做的一件简单的事情是将其作为函数编写，并在插入新div时调用该函数。类似的东西：

function Shortify() {
  $('.message-content').text(function(i, text) {
    if (text.length > 3) {
      $(this).html(text.substring(0, 3));

      $(this).siblings(".more-hidden").html(text.substring(3)).hide();
      $(this).siblings(".readmore").css("visibility", 'visible');
      $(this).css("float", 'left');
    }
  });
}

另一种解决方案是在将带有message-content类的元素添加到DOM中并对其进行操作以满足您的需求时进行侦听。您可以使用Mutation Observers。但要注意这个更复杂，如果你想通过不同的浏览器进行一致的行为，你需要调整一些东西。

Answer 2

您可以为链接使用功能.on功能。因此，您只能为所有div添加一个处理程序，但每次用户添加/更新评论时，您仍需要调用trim。

使用jQuery .on函数的示例：

// container - it is your comments parent block
var $container = $('.container');
$container.on('click', '.readmore', function(e) {
    // your handler
});

您可以在此处查看工作示例：http://jsfiddle.net/uk1qbd7s/1/

Answer 3

这是你想要的吗？

$('.message-content').each(function () {
    var toggle = $('<a href="#">... Read More</a>')
        .addClass('readmore')
        .insertAfter($(this));
    var more = $('<div></div>')
        .addClass('more-hidden')
        .insertAfter($(this));

    var msg = $(this).text();
    if (msg.length > 3) {
        $(this).html(msg.substring(0, 3));

        more.html(msg.substring(3)).hide();
        toggle.css("visibility", 'visible');
        $(this).css("float", 'left');
    }

    toggle.click(function (e) {
        e.preventDefault();
        more.slideToggle();
        $(this).text($(this).text() == '... Read More' ? "Show Less" : "... Read More");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div class="message-content">1)nice product</div><br/>
<div class="message-content">2)nice product</div><br/>
<div class="message-content">3)nice product</div><br/>
<div class="message-content">4)nice product</div><br/>

使用此代码，您可以添加任意数量的.message-content元素，并且该代码会自动添加.more-hidden和.readmore元素

如何为具有相同类名的不同div应用javascript函数？

3 个答案: