Question

在我的项目中，我有（可能很长）的出版物清单。通过jQuery我只显示4个出版物和按钮＆＃34;显示更多＆＃34;向别人展示但是当我刷新页面时，我的js代码没有运行，用户看到没有任何按钮的所有出版物。所以，我的js代码（这是来自.slim文件）：

// in my .slim file
ruby:
  show_more_text = I18n.t('projects.show_more')
  show_less_text = I18n.t('projects.show_less')

javascript:
    $( document ).ready($('.aw-block-list').each(function () {
    var LiN = $(this).find('.aw-item').length;
    if (LiN > 4) {
      $('.aw-item', this).eq(3).nextAll().hide().addClass('toggleable');
      $(this).append('<div class="aw-item"><div class="item-sub more" id="more"><span class="show-icon chevron-with-circle-down"></span> #{show_more_text}</div></div>');
    }
  }));

  $('#more').on('click', function () {
    if ($(this).hasClass('less')) {
        $(this).text('').append('<span class="show-icon chevron-with-circle-down"></span> #{show_more_text}').removeClass('less');
    } else {
        $(this).text('').append('<span class="show-icon chevron-with-circle-up"></span> #{show_less_text}').addClass('less');
    }

    $(this).parent().siblings('.aw-item.toggleable').slideToggle();
  });


// the publications list html (same file, but compiled)
<div class="aw-block-list">
   <div class="aw-item">
      <a class="item-name" href="https://hqroom.ru/elytnyi-dom-v-rostovskoi-oblasty.html">Elite house in the Rostov region</a>
      <div class="item-sub">Portal Hqroom</div>
   </div>
   <div class="aw-item">
      <a class="item-name" href="http://www.homedsgn.com/2016/09/09/architectural-studio-chado-designs-a-private-residence-in-the-rostov-region-of-russia/?awt_l=Ex6Yk&amp;awt_m=3YTH2VoXGZVIt8j">Designs a Private Residence in the Rostov Region</a>
      <div class="item-sub">Portal Homedsn</div>
   </div>
   <div class="aw-item">
      <a class="item-name" href="http://www.marchicucine.it/en/eugene-zadorozhnii-e-oleg-pigulevskaya-scelgono-la-cucina-marchi/">The Marchi Kitchen In project dedicated to house design of Chado studio</a>
      <div class="item-sub">Kitchens Marchi Cucine</div>
   </div>
   <div class="aw-item">
      <a class="item-name" href="http://www.flexform.it/en/projects/residential/rostov-russia">The section sofa in private house</a>
      <div class="item-sub">Furniture Flexform</div>
   </div>
   <div class="aw-item">
      <a class="item-name" href="http://www.brandvanegmond.com/en/projects/details/112/modern-country-house-russia">The modern country house. Russia</a>
      <div class="item-sub">Luminaires BRAND VAN EGMOND</div>
   </div>
   <div class="aw-item">
      <a class="item-name no-link" href="">Monumental elegance</a>
      <div class="item-sub">Home &amp; Family magazine, Rostov-on-Don</div>
   </div>
   <div class="aw-item">
      <a class="item-name no-link" href="">Elite house in Rostov-on-Don, Russia</a>
      <div class="item-sub">Flexform. A book with the best projects, Italia</div>
   </div>
</div>

这是用户在重新加载页面之前看到的内容：

他看到他是否刷新页面：

有什么建议吗？

Answer 1

所以，我的解决方案是：

javascript:
  $( document ).ready(function() {
      $('.aw-block-list').each(function () {
        var itemCount = $(this).find('.aw-item').length;
        if (itemCount > 4) {
            $('.aw-item', this).eq(3).nextAll().hide().addClass('toggleable');
            $(this).append('<div class="aw-item"><div class="item-sub more" id="more"><span class="show-icon chevron-with-circle-down"></span> #{show_more_text}</div></div>');
        }
      });
      $('#more').on('click', function () {
          if ($(this).hasClass('less')) {
              $(this).text('').append('<span class="show-icon chevron-with-circle-down"></span> #{show_more_text}').removeClass('less');
          } else {
              $(this).text('').append('<span class="show-icon chevron-with-circle-up"></span> #{show_less_text}').addClass('less');
          }

          $(this).parent().siblings('.aw-item.toggleable').slideToggle();
      });
  });

刷新页面时JS代码不会运行

1 个答案: