Question

我有一个页面分为两部分。一个显示带复选框的过滤器，另一个用于显示带段落的内容。

在页面加载时，我将显示过滤器和段落内容。点击过滤器复选框，将加载满足段落内容的相应段落内容。

所以问题是我有一个只显示200个字符的段落，并通过显示＆＃34; Read More ....＆＃34;文本。点击＆＃34;阅读更多....＆＃34;将显示所有段落内容。

我已经在document.ready方法上编写了这段代码，这首次正常工作。下次选择过滤器复选框时，将显示所有段落内容，而不是仅显示200个字符。

注意：我在common.js文件中编写了javascript

要使这个工作单击过滤器复选框，我必须再次在部分cshtml中重写此片段代码，而不是重用common.js文件中的那个。如何使用common.js文件中的函数。

＆＃13;

$(document).ready(function() {
  var showChar = 500; // How many characters are shown by default
  var ellipsestext = "...";
  var moretext = "Read More >>";
  var lesstext = "Read Less";

  $('.more').each(function() {
    var content = $(this).html();

    if (content.length > showChar) {

      var c = content.substr(0, showChar);
      var h = content.substr(showChar, content.length - showChar);

      var html = c + '<span class="moreellipses">' + ellipsestext + '&nbsp;</span><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;
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="more">                                                                                                    

       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse luctus mauris at scelerisque vestibulum. Nunc quis velit orci. Vivamus ut orci euismod, hendrerit risus eu, posuere turpis. Aenean posuere hendrerit tortor. Proin libero risus, ultricies id ex vel, congue posuere tortor. Duis cursus purus et turpis condimentum sagittis. Vivamus neque tellus, malesuada id feugiat in, suscipit ut odio<span class="moreellipses">...&nbsp;</span><span class="morecontent"><span>. Fusce sed vehicula lectus, ac aliquam purus. Sed eleifend, massa eget maximus tincidunt, ante odio mattis arcu, eu viverra orci est eu libero. Quisque volutpat lacus eros, id aliquet sem egestas nec. Etiam tortor lectus, faucibus et justo eget, semper auctor lectus. Donec sed ligula at lorem fermentum varius vitae ac ante.</span>&nbsp;&nbsp;<a href="" class="morelink">Read More &gt;&gt;</a></span></p>

＆＃13;

在文档就绪和部分视图加载完成时调用javascript

0 个答案: