添加带有 pagelime 的帖子后脚本停止工作答案

【问题标题】：Script stopped working after adding posts with pagelime添加带有 pagelime 的帖子后脚本停止工作
【发布时间】：2014-06-06 06:03:01
【问题描述】：

我有一个脚本可以让索引页面只显示最近的 5 篇博文（由它的 cms-repeat 类处理）。它工作得很好，直到我使用 PageLime（在线轻型 CMS）添加新的博客文章（它只是复制了一篇你然后编辑的文章）。出于某种原因，PageLime 确实会杀死脚本，我不知道为什么。我从服务器上抓取了我的 html 来查看，但仍然没有看到任何阻止脚本运行的内容。

这是正文部分、页脚、脚本代码：

 <section class="wrapper blog-page">
        <article id="editableBlogPost-1" class="cms-editable cms-repeat clearfix">
    <h2>Paper Towl Rolls</h2>
    <p>text...</p>
    </article><article id="e24450" class="cms-editable cms-repeat clearfix cms-previous-repeat-item-id-editableBlogPost-1" style="display: block;">
    <h2>No Storytime today!</h2>
    <p>text...</p>
    </article><article id="e15438" class="cms-editable cms-repeat clearfix cms-previous-repeat-item-id-editableBlogPost-1" style="display: block;">
    <h2>New Resources for Families</h2>
    <p>text...</p>
    <p><img id="e42608" src="/cms-assets/images/512037.optimized-may12-2-1.jpg" alt="Image of new books at the Logan Family Center, Anxiety, depression, self-esteem and shyness" width="300" height="224" />&nbsp; &nbsp; &nbsp;<img id="eca5c2" src="/cms-assets/images/107497.optimized-may12-1.jpg" alt="Photo of new family resource books, Anxiety, depression, self-esteem and shyness" width="300" height="224" /></p>
    <p>&nbsp;</p>
    </article><article id="e3c688" class="cms-editable cms-repeat clearfix cms-previous-repeat-item-id-editableBlogPost-1" style="display: block;">
    <h2>Around the World Presenters</h2>
    <p>text...</p>
    </article><article id="e70d96" class="cms-editable cms-repeat clearfix cms-previous-repeat-item-id-editableBlogPost-1" style="display: block;">
    <h2>Do You Have What it Takes?</h2>
    <p>text...</p>
    </article><article id="e2016e" class="cms-editable cms-repeat clearfix cms-previous-repeat-item-id-e70d96" style="display: block;">
    <h2>Ready! Set! School! -&nbsp;<span>Let's Read!</span></h2>
    <p><span><img id="e91bf1" src="/cms-assets/images/169742.optimized-april15.jpg" alt="Image of Ready! Set! School! Books used in the Lets Read lesson" width="300" height="225" />text...</span></p>
    <p>&nbsp;</p>
    </article><article id="e30bb5" class="cms-editable cms-repeat clearfix cms-previous-repeat-item-id-e2016e" style="display: block;">
    <h2>Welcome back</h2>
    <p><img id="e5597d" src="/cms-assets/images/287627.optimized-april8.jpg" alt="Image of Ready! Set! School! student with book, everybody counts lesson" width="300" height="225" /><span>text...</span></p>
    </article>
       <input type="button" id="more" value="More">
      </section>

      <footer class="page-footer">...</footer>

      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
      <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

      <script>

    //display next 5 blog posts when "#more" is clicked
           size_article = $('.cms-repeat').size();
            x=5;
            $('.cms-repeat:lt('+x+')').slideDown('slow').show();
            $('#more').click(function () {
              x= (x+5 <= size_article) ? x+5 : size_article;
              $('.cms-repeat:lt('+x+')').slideDown('slow').show();
              alert('its working?');
            });


      //hides "Please enable javascript" message for those with javascript
          $("#no-script").hide();

      </script>

【问题讨论】：

标签： javascript jquery content-management-system blogs

【解决方案1】：

问题是 PageLime 将 style="display: block" 作为内联 CSS 添加到我的大多数文章中，这当然比我的脚本具有更高的特异性。我找不到任何关于使用 Page Lime 关闭内联样式的信息，所以我只是在另一个之前添加了另一个 jQuery，以便首先删除样式 attr。

$('article').removeAttr("style");

【讨论】：