单击一次即可编辑Javascript以更改按钮颜色

如何解决单击一次即可编辑Javascript以更改按钮颜色

我是Java语言的新手，目前已经从互联网上复制了我的Java语言，但是我需要对其进行稍微的编辑以满足自己的需求。

当前，我拥有的代码将通过单击同一id下的另一个按钮来更改按钮的颜色，它通过添加和删除称为“活动”的标签来实现。效果很好，但我遇到一个问题，需要更改帮助：

要使其正常工作，其中一个按钮必须首先具有“ active”标签。我想要这样，从一开始就没有一个按钮处于“活动”状态，直到按下一个按钮为止。（例如，当用户看到按钮时，它们都是相同的颜色，直到他们按下一个为止）。按下该代码后，其代码将与当前相同。

如果我从代码中删除了以Java脚本开头的有效标签，则该标签似乎无效，并且单击按钮时也无法获得该有效标签。我该如何改变呢？这是我当前的代码：

HTML：

<div id="buttonscontainer">
  <div class="button active>Test1</div>
    <div class="button">Test2</div>
    <div class="button">Test3</div>
    <div class="button">Test4</div>
    <div class="button">Test5</div> 
  </div>

CSS：

.button {
  background-color: #92afde;
  margin: 10px;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
  border: solid 2px #92afde;
  border-radius: 5px;
  width: 150px;
}

.active,.button:hover {
    background-color: #32a852;
}

JavaScript：

<script>
var header = document.getElementById("buttonscontainer");
var btns = header.getElementsByClassName("button");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click",function() {
  var current = document.getElementsByClassName("active");
  current[0].className = current[0].className.replace(" active","");
  this.className += " active";
  });
}
</script>

解决方法

因为没有活动的类，它会返回undefined。您可以先删除所有活动类别，然后将活动类别附加到新单击的按钮上。

var header = document.getElementById("buttonscontainer");
var btns = header.querySelectorAll(".button");

btns.forEach( button => {
  //set click event
  button.addEventListener('click',function() {
    //remove all the active class from buttons
    btns.forEach( oldButton => {
      oldButton.classList.remove('active');
    });
    
    //append the active class to the new clicked button
    this.classList.add('active');
  })
})

.button {
  background-color: #92afde;
  margin: 10px;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
  border: solid 2px #92afde;
  border-radius: 5px;
  width: 150px;
}

.active,.button:hover {
    background-color: #32a852;
}

<div id="buttonscontainer">
  <div class="button">Test1</div>
  <div class="button">Test2</div>
  <div class="button">Test3</div>
  <div class="button">Test4</div>
  <div class="button">Test5</div>
</div>

您错过了有效课程附近的“ 双引号

在HTML中

col_name

更改为

<div class="button active>Test1</div>

签入脚本具有当前变量值。

<div class="button active">Test1</div>

if(current.length){ ..... } // check if current having value

var header = document.getElementById("buttonscontainer");
var btns = header.getElementsByClassName("button");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click",function() {
  var current = document.getElementsByClassName("active");
    if(current.length){
      current[0].className = current[0].className.replace(" active","");
      this.className += " active";
    }
  });
}

.button {
  background-color: #92afde;
  margin: 10px;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
  border: solid 2px #92afde;
  border-radius: 5px;
  width: 150px;
}

.active,.button:hover {
    background-color: #32a852;
}

您需要做的就是创建一个current[0]是否未定义的检查，这应该可以正常工作

var header = document.getElementById("buttonscontainer");
var btns = header.getElementsByClassName("button");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click",function() {
  var current = document.getElementsByClassName("active");
  if(current[0] != undefined){
  current[0].className = current[0].className.replace(" active","");
  }
  this.className += " active";
  });
}

.button {
  background-color: #92afde;
  margin: 10px;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
  border: solid 2px #92afde;
  border-radius: 5px;
  width: 150px;
}

.active,.button:hover {
    background-color: #32a852;
}

<div id="buttonscontainer">
  <div class="button">Test1</div>
    <div class="button">Test2</div>
    <div class="button">Test3</div>
    <div class="button">Test4</div>
    <div class="button">Test5</div> 
  </div>

我强烈建议您将jQuery用于此类事情。检查JS代码的外观。

const setColor = (e) => {
  $('.button').removeClass('active')
  $(e.target).addClass('active')
}

$('.button').on('click',setColor);

.button {
  background-color: #92afde;
  margin: 10px;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
  border: solid 2px #92afde;
  border-radius: 5px;
  width: 150px;
}

.active,.button:hover {
    background-color: #32a852;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="buttonscontainer">
  <div class="button">Test1</div>
  <div class="button">Test2</div>
  <div class="button">Test3</div>
  <div class="button">Test4</div>
  <div class="button">Test5</div> 
</div>

将脚本更改为此：


<script>
  var header = document.getElementById("buttonscontainer");
  var btns = header.getElementsByClassName("button");
  for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener("click",function (event) {
      var current = document.getElementsByClassName("active");
      if (current.length == 0) event.target.className += " active";
      else {
        current[0].className = current[0].className.replace(" active","");
        this.className += " active";
      }
    });
  }
</script>

如果当前没有其他按钮处于活动状态，则会使该按钮在单击时处于活动状态。因此它可能会为您的目的工作：）

单击一次即可编辑Javascript以更改按钮颜色

如何解决单击一次即可编辑Javascript以更改按钮颜色

解决方法

相关推荐