Question

我有几个显示文本的div，我设法用dotdotdot插件正确包装这些div。

我想要的是在包装的div之后显示“read more”链接，并在用户点击链接时显示div的完整原始内容。

问题是我没有设法正确使用triggerHandler(originalContent)函数（div.html()返回包装文本），我认为这主要归因于所有包装的div共享一个相同的CSS类。

这是我的HTML：

<section>
  <article>
   <h3>title<h3>
   <div>paragraph to be wrapped</div>
   <a class="readmore">Read more</a>
  </article>
  <article>
   <h3>title<h3>
   <div>paragraph to be wrapped</div>
   <a class="readmore">Read more</a>
  </article>
</section>

我有超过2个div，但你得到了图片

jQuery包装div（工作正常）：

$('article').each(function(){
   $(this).find('div').dotdotdot({after: '.readmore'})
});

最后但并非最不重要的是，检索包装div的原始内容的代码（显示弹出窗口不是问题）

$('.readmore').click(function(){
  //first I want to target the div right above the clicked .readmore link
  var targetedDiv = $(event.target).parent().children('div');

  // Then I try to get the div's original content through the dotdotdot function
  var targetedDivHTML = targetedDiv.triggerHandler('originalContent');

});

但当我提醒targetedDivHTML以查看我是否获得正确的内容时，我得到[object Object]或错误消息，说明没有定义triggerHandler（）。

有什么想法吗？

Answer 1

解决。把$（'。readmore'）。点击函数放在$（'。article'）中。每个循环都有效：

$('article').each(function(){
   $(this).find('div').dotdotdot({after: '.readmore'})

  $(this).click(function(){
    var content = $(this).find('div').triggerHandler('originalContent');
    $('.fulltextdiv').append(content);
    $('.fulltextdiv').show();

  });
});

然后可以通过单击整篇文章打开弹出窗口，而不仅仅是阅读更多链接，但它仍然可以正常运行

dotdotdot originalContent有多个div

1 个答案: