Question

我有一个ID为#myList的div，它包含8个子div，每个子div中都有图片。

我想做的是默认情况下先加载3张图片，然后单击加载更多

我已遵循此jsfiddle

我的代码在下方且相似，但由于未知原因无法正常运行

        <div id="mylist" class="autoplay123company">

          <div class="col-lg-4 d-flex justify-content-center" style="" aria-hidden="true" tabindex="0">

            <img src=" http://realbusinessanalytics.com/wp-content/uploads/2018/07/gtbank__1.jpg" alt="" style="height:100px !important;" width="150" height="100">

          </div>
          <div class="col-lg-4 d-flex justify-content-center" style="" aria-hidden="true" tabindex="0">

            <img src=" http://realbusinessanalytics.com/wp-content/uploads/2018/07/partner-MTN.png" alt="" style="height:100px !important;" width="150" height="100">

          </div>
          <div class="col-lg-4 d-flex justify-content-center" style="" aria-hidden="true" tabindex="0">

            <img src=" http://realbusinessanalytics.com/wp-content/uploads/2018/07/Partner-airtel.png" alt="" style="height:100px !important;" width="150" height="100">

          </div>
          <div class="col-lg-4 d-flex justify-content-center" style="" aria-hidden="true" tabindex="0">

            <img src=" http://realbusinessanalytics.com/wp-content/uploads/2018/06/page-1.png" alt="" style="height:100px !important;" width="150" height="100">

          </div>
          <div class="col-lg-4 d-flex justify-content-center" style="" aria-hidden="true" tabindex="0">

            <img src=" http://realbusinessanalytics.com/wp-content/uploads/2018/07/Partner-citibank.png" alt="" style="height:100px !important;" width="150" height="100">

          </div>
          <div class="col-lg-4 d-flex justify-content-center" style="" aria-hidden="true" tabindex="-1">

            <img src=" " alt="" style="height:100px !important;" width="150" height="100">

          </div>
          <div class="col-lg-4 d-flex justify-content-center" style="" aria-hidden="true" tabindex="-1">

            <img src=" " alt="" style="height:100px !important;" width="150" height="100">

          </div>
          <div class="col-lg-4 d-flex justify-content-center" style="" aria-hidden="true" tabindex="-1">

            <img src=" " alt="" style="height:100px !important;" width="150" height="100">

          </div>
        </div>
        <div id="loadMore">Load more</div>
        <div id="showLess">Show less</div>

#myList div.col-lg-4 {
  display: none;
}

#loadMore {
  color: green;
  cursor: pointer;
}

#loadMore:hover {
  color: black;
}

#showLess {
  color: red;
  cursor: pointer;
}

#showLess:hover {
  color: black;
}

<div id="mylist" class="autoplay123company">

  <div class="col-lg-4 d-flex justify-content-center" style="" aria-hidden="true" tabindex="0">

    <img src=" http://realbusinessanalytics.com/wp-content/uploads/2018/07/gtbank__1.jpg" alt="" style="height:100px !important;" width="150" height="100">

  </div>
  <div class="col-lg-4 d-flex justify-content-center" style="" aria-hidden="true" tabindex="0">

    <img src=" http://realbusinessanalytics.com/wp-content/uploads/2018/07/partner-MTN.png" alt="" style="height:100px !important;" width="150" height="100">

  </div>
  <div class="col-lg-4 d-flex justify-content-center" style="" aria-hidden="true" tabindex="0">

    <img src=" http://realbusinessanalytics.com/wp-content/uploads/2018/07/Partner-airtel.png" alt="" style="height:100px !important;" width="150" height="100">

  </div>
  <div class="col-lg-4 d-flex justify-content-center" style="" aria-hidden="true" tabindex="0">

    <img src=" http://realbusinessanalytics.com/wp-content/uploads/2018/06/page-1.png" alt="" style="height:100px !important;" width="150" height="100">

  </div>
  <div class="col-lg-4 d-flex justify-content-center" style="" aria-hidden="true" tabindex="0">

    <img src=" http://realbusinessanalytics.com/wp-content/uploads/2018/07/Partner-citibank.png" alt="" style="height:100px !important;" width="150" height="100">

  </div>
  <div class="col-lg-4 d-flex justify-content-center" style="" aria-hidden="true" tabindex="-1">

    <img src=" " alt="" style="height:100px !important;" width="150" height="100">

  </div>
  <div class="col-lg-4 d-flex justify-content-center" style="" aria-hidden="true" tabindex="-1">

    <img src=" " alt="" style="height:100px !important;" width="150" height="100">

  </div>
  <div class="col-lg-4 d-flex justify-content-center" style="" aria-hidden="true" tabindex="-1">

    <img src=" " alt="" style="height:100px !important;" width="150" height="100">

  </div>
</div>
<div id="loadMore">Load more</div>
<div id="showLess">Show less</div>

请帮助我实现它。这是my edited jsfiddle

Answer 1

您在JS和CSS中指的是#myList，但div实际上是mylist。如果您在div ID上更正了大小写，则所有内容都应按预期工作。

Answer 2

这是在HTML中ID大写#myList中的一个简单错误的工作方式

$(document).ready(function () {
    size_li = $("#myList div.col-lg-4").size();
    x=3;
    $('#myList div.col-lg-4:lt('+x+')').show();
    $('#loadMore').click(function () {
        x= (x+5 <= size_li) ? x+5 : size_li;
        $('#myList div.col-lg-4:lt('+x+')').show();
         $('#showLess').show();
        if(x == size_li){
            $('#loadMore').hide();
        }
    });
    $('#showLess').click(function () {
        x=(x-5<0) ? 3 : x-5;
        $('#myList div.col-lg-4').not(':lt('+x+')').hide();
        $('#loadMore').show();
         $('#showLess').show();
        if(x == 3){
            $('#showLess').hide();
        }
    });
});

#myList div.col-lg-4 {
  display: none;
}

#loadMore {
  color: green;
  cursor: pointer;
}

#loadMore:hover {
  color: black;
}

#showLess {
  color: red;
  cursor: pointer;
}

#showLess:hover {
  color: black;
}

        <div id="myList" class="autoplay123company">

          <div class="col-lg-4 d-flex justify-content-center" style="" aria-hidden="true" tabindex="0">

            <img src=" http://realbusinessanalytics.com/wp-content/uploads/2018/07/gtbank__1.jpg" alt="" style="height:100px !important;" width="150" height="100">

          </div>
          <div class="col-lg-4 d-flex justify-content-center" style="" aria-hidden="true" tabindex="0">

            <img src=" http://realbusinessanalytics.com/wp-content/uploads/2018/07/partner-MTN.png" alt="" style="height:100px !important;" width="150" height="100">

          </div>
          <div class="col-lg-4 d-flex justify-content-center" style="" aria-hidden="true" tabindex="0">

            <img src=" http://realbusinessanalytics.com/wp-content/uploads/2018/07/Partner-airtel.png" alt="" style="height:100px !important;" width="150" height="100">

          </div>
          <div class="col-lg-4 d-flex justify-content-center" style="" aria-hidden="true" tabindex="0">

            <img src=" http://realbusinessanalytics.com/wp-content/uploads/2018/06/page-1.png" alt="" style="height:100px !important;" width="150" height="100">

          </div>
          <div class="col-lg-4 d-flex justify-content-center" style="" aria-hidden="true" tabindex="0">

            <img src=" http://realbusinessanalytics.com/wp-content/uploads/2018/07/Partner-citibank.png" alt="" style="height:100px !important;" width="150" height="100">

          </div>
          <div class="col-lg-4 d-flex justify-content-center" style="" aria-hidden="true" tabindex="-1">

            <img src=" " alt="" style="height:100px !important;" width="150" height="100">

          </div>
          <div class="col-lg-4 d-flex justify-content-center" style="" aria-hidden="true" tabindex="-1">

            <img src=" " alt="" style="height:100px !important;" width="150" height="100">

          </div>
          <div class="col-lg-4 d-flex justify-content-center" style="" aria-hidden="true" tabindex="-1">

            <img src=" " alt="" style="height:100px !important;" width="150" height="100">

          </div>
        </div>
        <div id="loadMore">Load more</div>
        <div id="showLess">Show less</div>

这里是Working jsfiddle。谢谢宏

加载HTML中的前3个图像元素，单击“加载更多”以显示后2个元素

2 个答案: