javascript - 在 HTML 中加载前 3 个图像元素，单击 “load more” 以显示接下来的 2 个元素

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 上的大小写，那么一切都应该按预期工作。