Question

我下面有代码，一切运行良好。但是，如果我将该脚本代码插入脚本中，将无法正常工作。控制台中没有错误。为什么？在Fiddle中，一切运转良好。是因为Javascript版本错误？

<div class="param-filter-single">
   <form method="post">
      <fieldset class="parametric-filter">
           <strong>Hlavní</strong>
           <br>
           <div class="param-filter-single-cell">One</div>
           <div class="param-filter-single-cell">One</div>
           <div class="param-filter-single-cell">One</div>
           <div class="param-filter-single-cell">One</div>
           <div class="param-filter-single-cell">One</div>
           <div class="param-filter-single-cell">One</div>
           <div class="param-filter-single-cell">One</div>
           <div id="loadMore">Load more</div>
           <div id="showLess">Show less</div>
     </fieldset> 
   </form>
</div>

<style>.param-filter-single .param-filter-single-cell {display: none}</style>

<script type="text/javascript" language="javascript">
    $(document).ready(function () {
    size_li = $(".param-filter-single .param-filter-single-cell").size();
    x=5;
    $('.param-filter-single .param-filter-single-cell:lt('+x+')').show();
    $('#loadMore').click(function () {
        x= (x+5 <= size_li) ? x+5 : size_li;
        $('.param-filter-single .param-filter-single-cell:lt('+x+')').show();
    });
    $('#showLess').click(function () {
        x=(x-5<0) ? 3 : x-5;
        $('.param-filter-single .param-filter-single-cell').not(':lt('+x+')').hide();
    });
    });
</script>

Answer 1

也许这是您的解决方案。

var text = $('.pureyad'),
     btn = $('.purgex'),
       h = text[0].scrollHeight; 

if(h > 120) {
	btn.addClass('less');
	btn.css('display', 'block');
}

btn.click(function(e) 
{
  e.stopPropagation();

  if (btn.hasClass('less')) {
      btn.removeClass('less');
      btn.addClass('more');
      btn.text('Show less');

      text.animate({'height': h});
  } else {
      btn.addClass('less');
      btn.removeClass('more');
      btn.text('Show more');
      text.animate({'height': '120px'});
  }  
});

   .pureyad {
        max-width: 600px;
        line-height: 1.1em;
        font-family: 'Roboto Slab';
        overflow: hidden;
        background: #46988f;
        font-size: 14px;
        height: 120px;
        padding-left: 20px
    }

    .purgex {
        display: block;
        background: transparent;
        border: none;
        border-top: 1px solid #222;
        width: 585px;
        max-width: 100%;
        font-family: 'baloo bhai';
        font-size: 15px
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pureyad">
<p>Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet..</p>
                </div>
<center><button class="purgex">Show more</button></center>

如何仅通过“加载更多”按钮显示前5个div？

1 个答案: