时间戳

首页 > 解决方案 > 无法将活动类添加到网站上的按钮

javascript - 无法将活动类添加到网站上的按钮

问题描述

我正在尝试向我的按钮添加一个活动类，以便当您单击它们时，悬停动画将保持在活动按钮上。似乎我的 javascript 中的某些内容没有遵循我将活动类添加到我放置的任何元素的调用。请帮助thnx ^_^

https://jsfiddle.net/purpkev/pf1vzx2t/7/

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Ukiyo Sushi ツ&lt;/title>
    <link href = "/style.css" type = "text/css" rel = "stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Fira+Sans&display=swap" rel="stylesheet">
    <script src = "/script.js"></script>
</head>
<body>
    <!--<div class = "hero active">
    <div class = "hero1">    
    <div class = "hero2">-->    
        <header id = "bg">
            <nav class = "navbar">
                <a href = "#" class = "logo">Ukiyo Sushi ツ&lt;/a>
                <ul>
                    <li><a href ="#" class = "about">About us</a></li>
                    <li><a href = "#" class = "menu">Menu</a></li>
                    <li><a href = "#" class = "services">Services</a></li>
                    <li><a href = "#" class = "contact">Contact</a></li>
                </ul>
            </nav> 
            <div class = "sushiPlatter">
                <h2 id = "caption">Chef's Special Sushi Platter</h2>
                <div class = "dots">
                    <button class = "dot" onclick = "imgslider(1)"></button>
                    <button class = "dot" onclick = "imgslider(2)"></button>
                    <button class = "dot" onclick = "imgslider(3)"></button>
                </div>
                <a href = "#">View Menu</a>
            </div>
        </header>
    <!--</div>
    </div>
    </div>-->
    <section class = "idkYet">
        <div>
            <span>hello I am filler content</span>
        </div>    
    </section>
</body>
</html>

CSS：

.dots{
    display: flex;
    flex-direction: column;
    align-self: flex-end;
    margin: 0 1em;
}

.dot{
    display: inline-block;
    cursor: pointer;
    height: 15px;
    width: 15px;
    background-color: transparent;
    border: solid 2px white;
    border-radius: 50%;
    margin: .2em;
    transform: scale(.75);
    outline-color: white;
}

.active{
    transform: scale(1);
    opacity: .25;
}

.dot:hover, .dot:hover, .dot:hover{
    transform: scale(1);
    opacity: .25;
    transition: transform 1s ease-in;
    transition: opacity .5s;
}

Javascript：

function buttonClick(){
   var button = document.getElementsByClassName("dots");
   var dot = button.children;
   dot[0].classList.add("active");
   for(var i = 0; i < dot.length; i++){
         dot[i].addEventListener("click", function(){
         var active = document.getElementsByClassName("active");
         active[0].className = active[0].className.replace("active", "");
         this.className += "active";
      });
   }
}

编辑：我在评论中尝试了建议，但活动类仍然没有被添加到活动按钮中，这是我的代码的样子：

function buttonClick(){
   var button = document.getElementsByClassName("dots");
   var dot = button[0].children;
   dot[0].classList.add("active");
   for(var i = 0; i < dot.length; i++){
         dot[i].addEventListener("click", function(){
         var active = document.getElementsByClassName("active");
         active[0].className = active[0].className.replace("active", "");
         this.className += "active";
      });
   }
}

标签： javascripthtmlcss

解决方案

看起来你一次又一次地添加 eventListeners 。

也许尝试这种方法，您可以使用“this”关键字将按钮元素发送到函数......

（见小提琴：https ://jsfiddle.net/sre1dua9/1/ ）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Ukiyo Sushi ツ&lt;/title>
    <link href = "/style.css" type = "text/css" rel = "stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Fira+Sans&display=swap" rel="stylesheet">
    <script src = "/script.js"></script>
</head>
<body>
    <!--<div class = "hero active">
    <div class = "hero1">    
    <div class = "hero2">-->    
        <header id = "bg">
            <nav class = "navbar">
                <a href = "#" class = "logo">Ukiyo Sushi ツ&lt;/a>
                <ul>
                    <li><a href ="#" class = "about">About us</a></li>
                    <li><a href = "#" class = "menu">Menu</a></li>
                    <li><a href = "#" class = "services">Services</a></li>
                    <li><a href = "#" class = "contact">Contact</a></li>
                </ul>
            </nav> 
            <div class = "sushiPlatter">
                <h2 id = "caption">Chef's Special Sushi Platter</h2>
                <div class = "dots">
                    <button class = "dot" onclick="window.imgslider(this, 1)"></button>
                    <button class = "dot" onclick="window.imgslider(this, 2)"></button>
                    <button class = "dot" onclick="window.imgslider(this, 3)"></button>
                </div>
                <a href = "#">View Menu</a>
            </div>
        </header>
    <!--</div>
    </div>
    </div>-->
    <section class = "idkYet">
        <div>
            <span>hello I am filler content</span>
        </div>    
    </section>
</body>
</html>

然后只需跟踪单击的最后一个按钮：

var lastDot = null;
window.imgslider = function(elem, x)
{  
   var bg = document.getElementById("bg");
   var dot = document.getElementsByClassName("dot");
   var caption = document.getElementById("caption");
   switch(x){
      case 1:
         bg.style.backgroundImage = "-webkit-linear-gradient(rgba(0,0,0,.375), rgba(0,0,0,.375)),url(/img/header.jpg)";
         caption.style.marginLeft = "0em";
         caption.innerHTML = "Chef's Special Sushi Platter";
         break;
      case 2: 
         bg.style.backgroundImage = "-webkit-linear-gradient(rgba(0,0,0,.375), rgba(0,0,0,.375)),url(/img/pokebowl.jpg)";
         caption.style.marginLeft = "2em";
         caption.innerHTML = "Spring Poke Bowl";
         break;
      case 3:
         bg.style.backgroundImage = "-webkit-linear-gradient(rgba(0,0,0,.375), rgba(0,0,0,.375)),url(/img/ramen.jpg)";
         caption.style.marginLeft = "3.75em";
         caption.innerHTML = "Miso Ramen"; 
   }

 // do dots
   if(lastDot){
    lastDot.classList.remove("active");
  }
  elem.classList.add("active");

  // store last dot for next click
  lastDot = elem;
}

推荐阅读