javascript 如何制作“查看更多”按钮

omqzjyyz  于 2023-04-28  发布在  Java
关注(0)|答案(4)|浏览(116)

我想让它有3个图像，当我点击查看更多按钮，它会显示4个图像。我做了html，css和javascript，但立即显示的图像是4。其应显示3，并且当点击查看更多时将显示4个图像。所以有很多图片，但只有3张图片显示，当你点击查看更多按钮，它会显示其他图片

let loadMoreBtn = document.querySelector('.load-more');
    let currentItem = 3;

    loadMoreBtn.onclick = () =>{
    let boxes = [...document.querySelectorAll('.container .hobby-list .hobby')];
    for (var i = currentItem; i < currentItem + 3; i++){
      boxes[i].style.display = 'inline-block';
    }
    currentItem += 3;

    if(currentItem >= boxes.length){
      loadMoreBtn.style.display = 'none';
    }
}
#Hobby{
    padding: 50px 0;
}
.hobby-list{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 40px;
}
.hobby{
    border-radius: 10px;
    position: relative;
}
.hobby img{
    width: 100%;
    border-radius: 10px;
    display: block;
    transition: transform 0.5s;
}
.layer{
    width: 100%;
    height: 0;
    background: linear-gradient(rgba(0,0,0,0.6), #31c48d);
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 40px;
    text-align: center;
    font-size: 14px;
    transition: height 0.5s;
}

.layer a{
    margin-top: 15px;
    color: #31c48d;
    text-decoration: none;
    font-size: 18px;
    line-height: 60px;
    background: #fff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    text-align: center;
}
<div id="Hobby">
    <div class="container">
        <div class="hobby-list">
            <div class="hobby">
                <img src="Assets/hobby_1.png">
                    <div class="layer">
                        <h3>Playing soccer</h3><br>
                    </div>
            </div>
            <div class="hobby">
                <img src="Assets/hobby_2.png">
                    <div class="layer">
                        <h3>Playing game</h3><br>
                    </div>
            </div>
            <div class="hobby">
                <img src="Assets/hobby_3.png">
                    <div class="layer">
                        <h3>Playing basketball</h3><br>
                    </div>
            </div>
            <div class="hobby">
                <img src="Assets/hobby_4.png">
                    <div class="layer">
                        <h3>Painting</h3><br>
                    </div>
            </div>
        </div>
        <div class="load-more">See more</div>
    </div>
</div>
JavaScript

4条答案

按热度按时间
nr9pn0ug

nr9pn0ug1#

首先，将类display: none添加到您不希望在第一次加载时显示的图像中
请参阅下面的代码逻辑，以显示更多按钮上的图像也不正确，所以我已经改变了这一点

let loadMoreBtn = document.querySelector('.load-more');
    let currentItem = 3;

    loadMoreBtn.onclick = () =>{
    let boxes = [...document.querySelectorAll('.container .hobby-list .hobby')];
    for (var i = currentItem; i < boxes.length; i++){
      boxes[i].style.display = 'inline-block';
    }
    currentItem += 3;

    if(currentItem >= boxes.length){
      loadMoreBtn.style.display = 'none';
    }
}
#Hobby{
    padding: 50px 0;
}
.hobby-list{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 40px;
}
.hobby{
    border-radius: 10px;
    position: relative;
}
.hobby img{
    width: 100%;
    border-radius: 10px;
    display: block;
    transition: transform 0.5s;
}
.layer{
    width: 100%;
    height: 0;
    background: linear-gradient(rgba(0,0,0,0.6), #31c48d);
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 40px;
    text-align: center;
    font-size: 14px;
    transition: height 0.5s;
}

.layer a{
    margin-top: 15px;
    color: #31c48d;
    text-decoration: none;
    font-size: 18px;
    line-height: 60px;
    background: #fff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    text-align: center;
}

.display-none {
    display: none;
}
<div id="Hobby">
    <div class="container">
        <div class="hobby-list">
            <div class="hobby">
                <img src="Assets/hobby_1.png">
                    <div class="layer">
                        <h3>Playing soccer</h3><br>
                    </div>
            </div>
            <div class="hobby">
                <img src="Assets/hobby_2.png">
                    <div class="layer">
                        <h3>Playing game</h3><br>
                    </div>
            </div>
            <div class="hobby">
                <img src="Assets/hobby_3.png">
                    <div class="layer">
                        <h3>Playing basketball</h3><br>
                    </div>
            </div>
            <div class="hobby display-none">
                <img src="Assets/hobby_4.png">
                    <div class="layer">
                        <h3>Painting</h3><br>
                    </div>
            </div>
        </div>
        <div class="load-more">See more</div>
    </div>
</div>
赞(0）分享  回复(0）举报  2023-04-28
xfyts7mz

xfyts7mz2#

  • 隐藏 * 首先您不想显示的图像，并添加使其可见，一旦用户单击按钮 * 查看更多 *。
function loadMore() {
  var dots = document.getElementById("dots");
  var moreImage = document.getElementById("more");
  var loadBtn = document.getElementById("load-more");

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    loadBtn.innerHTML = "See more"; 
    moreImage.style.display = "none";
  } else {
    dots.style.display = "none";
    loadBtn.innerHTML = "See less"; 
    moreImage.style.display = "inline";
  }
}
#Hobby{
   padding: 50px 0;
}
.hobby-list{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   grid-gap: 40px;
}
.hobby{
   border-radius: 10px;
   position: relative;
}
.hobby img{
   width: 100%;
   border-radius: 10px;
   display: block;
   transition: transform 0.5s;
}
.layer{
   width: 100%;
   height: 0;
   background: linear-gradient(rgba(0,0,0,0.6), #31c48d);
   position: absolute;
   left: 0;
   bottom: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   padding: 0 40px;
   text-align: center;
   font-size: 14px;
   transition: height 0.5s;
}

.layer a{
   margin-top: 15px;
   color: #31c48d;
   text-decoration: none;
   font-size: 18px;
   line-height: 60px;
   background: #fff;
   width: 60px;
   height: 60px;
   border-radius: 50%;
   text-align: center;
}

.display-none {
   display: none;
}
#more {
   display: none;
}
#dots{
   font-weight: bold;
   font-size: 32px;
}
#load-more{
   height: 30px;
   width: 100px;
   text-align: center;
   background-color: gray;
}
#load-more:hover{
   cursor: pointer;
}
<div id="Hobby">
   <div class="container">
         <div class="hobby-list">
            <div class="hobby">
               <img src="Assets/hobby_1.png">
                     <div class="layer">
                        <h3>Playing soccer</h3><br>
                     </div>
            </div>
            <div class="hobby">
               <img src="Assets/hobby_2.png">
                     <div class="layer">
                        <h3>Playing game</h3><br>
                     </div>
            </div>
            <div class="hobby">
               <img src="Assets/hobby_3.png">
                     <div class="layer">
                        <h3>Playing basketball</h3><br>
                     </div>
            </div>
            <span id="dots">&#187;</span>
            <span id="more">
               <div class="hobby">
                  <img src="Assets/hobby_4.png">
                     <div class="layer">
                        <h3>Painting</h3><br>
                     </div>
               </div>
            </span>
         </div>
         <div onclick="loadMore()" class="load-more" id="load-more">See more</div>
   </div>
</div>
赞(0）分享  回复(0）举报  2023-04-28
ovfsdjhp

ovfsdjhp3#

首先我们需要将display: none添加到css上的所有图像中，然后我们只显示加载的前3个图像，然后每当我们单击加载按钮时，我们都会显示从第4个开始的图像。

let loadMoreBtn = document.querySelector('.load-more');
let currentItem = 3;

let boxes = [...document.querySelectorAll('.container .hobby-list .hobby')];
for (var i = 0; i < currentItem; i++) {
   boxes[i].style.display = 'inline-block';
}

loadMoreBtn.onclick = () => {
    boxes[currentItem].style.display = 'inline-block';
    currentItem += 1;
    if(currentItem >= boxes.length){
      loadMoreBtn.style.display = 'none';
    }
}
#Hobby{
    padding: 50px 0;
}
.hobby-list{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 40px;
}
.hobby{
    border-radius: 10px;
    position: relative;
    display:none;
}
.hobby img{
    width: 100%;
    border-radius: 10px;
    display: block;
    transition: transform 0.5s;
}
.layer{
    width: 100%;
    height: 0;
    background: linear-gradient(rgba(0,0,0,0.6), #31c48d);
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 40px;
    text-align: center;
    font-size: 14px;
    transition: height 0.5s;
}

.layer a{
    margin-top: 15px;
    color: #31c48d;
    text-decoration: none;
    font-size: 18px;
    line-height: 60px;
    background: #fff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    text-align: center;
}
<div id="Hobby">
    <div class="container">
        <div class="hobby-list">
            <div class="hobby">
                <img src="https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.png">
                    <div class="layer">
                        <h3>Playing soccer</h3><br>
                    </div>
            </div>
            <div class="hobby">
                <img src="https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.png">
                    <div class="layer">
                        <h3>Playing game</h3><br>
                    </div>
            </div>
            <div class="hobby">
                <img src="https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.png">
                    <div class="layer">
                        <h3>Playing basketball</h3><br>
                    </div>
            </div>
            <div class="hobby">
                <img src="https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.png">
                    <div class="layer">
                        <h3>Painting</h3><br>
                    </div>
            </div>
            <div class="hobby">
                <img src="https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.png">
                    <div class="layer">
                        <h3>Testing</h3><br>
                    </div>
            </div>
        </div>
        <div class="load-more">See more</div>
    </div>
</div>
赞(0）分享  回复(0）举报  2023-04-28
7rtdyuoh

7rtdyuoh4#

要创建一个“查看更多”按钮，您可以使用JavaScript和CSS在单击按钮时切换其他内容的可见性。下面是一个例子：

HTML：

<div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac velit euismod, bibendum sapien vel, ultrices velit. Sed euismod, velit vel bibendum bibendum, sapien velit ultrices velit, vel bibendum sapien velit vel velit.</p>
        <p class="hidden">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed euismod, velit vel bibendum bibendum, sapien velit ultrices velit, vel bibendum sapien velit vel velit.</p>
        <button class="see-more">See More</button>
    </div>

CSS：

.hidden {
  display: none;
}

Javascript：

var seeMoreBtn = document.querySelector('.see-more');
var hiddenContent = document.querySelector('.hidden');

seeMoreBtn.addEventListener('click', function() {
 hiddenContent.classList.toggle('hidden');
 if (hiddenContent.classList.contains('hidden')) {
    seeMoreBtn.textContent = 'See More';
  } else {
   seeMoreBtn.textContent = 'See Less';
 }

}）;
希望这个工作！

赞(0）分享  回复(0）举报  2023-04-28
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com