简体   繁体   English

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

[英]Script stopped working after adding posts with pagelime

I have a script that will make the index page only display the 5 most recent blog posts (handeled by it's cms-repeat class). 我有一个脚本,它将使索引页面仅显示5个最新的博客帖子(由cms-repeat类处理)。 It works fine, until I use PageLime (online light CMS) to add new blog posts (It just duplicates an article that you then edit). 效果很好,直到我使用PageLime(在线light CMS)添加新的博客文章(它只是复制您随后编辑的文章)。 For some reason, somemthing PageLime does kills the script and I cant figure out why. 由于某些原因,PageLime确实杀死了脚本,我无法弄清楚原因。 I grabbed my html off the server to have a look, but still don't see anything that is preventing the script from running. 我从服务器上抓取了html进行查看,但仍然看不到任何阻止脚本运行的内容。

Here's the main body section, footer, script code: 这是主体部分,页脚和脚本代码:

 <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>

Problem was that PageLime added the style="display: block" as inline CSS to most of my articles, which of course had higher specificity than my script. 问题是PageLime在大多数文章中都添加了style =“ display:block”作为内联CSS,这当然比我的脚本具有更高的特异性。 I couldn't find anything about turning off inline styles with Page Lime, so I'm just adding another bit of jQuery before the other in order to remove the style attr first. 我找不到有关使用Page Lime关闭内联样式的任何信息,因此,我只是在其他样式之前添加了jQuery以便首先删除样式属性。

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM