Question

嗨我只是想知道这些if语句在哪里出错了我看不出它们有什么问题，但是当点击html按钮时它们似乎没有按照预期的那样工作，我已经确定了当单击按钮时，作为控制台显示“按钮单击”。

---
- hosts: local

tasks:
  - name: Removes the tag in local repository.
    shell: git tag -d {{git_deploy_tag}}
    tags: [tagging]

- hosts: remote

tasks:
  - name: Removes the tag in remote repository.
    shell: git push origin :refs/tags/{{git_deploy_tag}}
    tags: [tagging]

Answer 1

您需要添加关键字else，否则每个条件都会得到满足，让您走完整个圈子。

function colorSwitch () {
  var thediv = document.getElementsByClassName("light");

  console.log("Button Clicked");

  if (thediv[0].style.backgroundColor == "#ff0000") {
    thediv[0].style.backgroundColor = "#ffff00";
  }
  else if (thediv[0].style.backgroundColor == "#ffff00") {
    thediv[0].style.backgroundColor = "#00ff00";
  }
  else if (thediv[0].style.backgroundColor == "#00ff00") {
    thediv[0].style.backgroundColor = "#ff0000";
  }
};

Answer 2

每次点击后，都会直接询问一个if语句;意思是当你进一步深入了解这个方法时，它们都变得真实。

包含else语句是一种可行的方法。

另一种方法是使用Array颜色，假设您需要特定订单：

var colors = ["#ff0000", "#ffff00", "#00ff00"];
var switched = 0;

function colorSwitch () {

  var elements = document.getElementsByClassName("light");
  
  elements[0].style.backgroundColor = colors[switched % colors.length];

  switched++;
  
};

.light {
  
  width: 100px;
  height: 3em;
  
  border-radius: .25em;

  background-color: grey;
  color: white;
  line-height: 3em;
  text-align: center;
  
  cursor: pointer;
  
}

<div class="light" onclick="javascript:colorSwitch();">Click Me</div>

Answer 3

如果阻止，您将覆盖每个背景颜色。您需要将其更改为if-else if-else format，切换案例，或使用对象选择新颜色。

function colorSwitch()
{
   var thediv = document.getElementsByClassName("light");

  console.log("Button Clicked");

  if(thediv[0].style.backgroundColor == "#ff0000")
  {
     thediv[0].style.backgroundColor = "#ffff00";
  }
  else if(thediv[0].style.backgroundColor == "#ffff00")
  {
     thediv[0].style.backgroundColor = "#00ff00";
  }
  else if(thediv[0].style.backgroundColor == "#00ff00")
  {
     thediv[0].style.backgroundColor = "#ff0000";
  }
}

或者你可以这样做：

var colorMap = {
    "#ff0000": "#ffff00",
    "#ffff00":"#00ff00",
    "#00ff00": "#ff0000"
}
thediv[0].style.backgroundColor = colorMap[thediv[0].style.backgroundColor];

或switch-case：

switch(thediv[0].style.backgroundColor)
{
    case "#ff0000":
        thediv[0].style.backgroundColor = "#ffff00";
        break;
    case "#ffff00":
        thediv[0].style.backgroundColor = "#00ff00";
        break;
    case "#00ff00":
        thediv[0].style.backgroundColor = "#ff0000";
        break;
}

Answer 4

即使您运行此代码： thediv[0].style.backgroundColor = "#00ff00" 语句thediv[0].style.backgroundColor == "#00ff00"将返回false（至少对于我的chrome控制台）

另外，正如其他人指出的那样，你需要使用else

如果语句带有背景颜色

4 个答案: