Div OnClick提示是或否，如果是，则DIV更改为不同的颜色

我正在在接收用户数据的网站上工作，无论他是否确实要帮助患者。

我真的不知道该如何开始，而我一直在1个简单的功能上持续数周。

示例：我单击了正方形，它提示我是或否，颜色变黄。单击黄色的广场会提示我另一个是或否。将其转回原始颜色。

function myFunction() {
   if (confirm("Press a button!") == true) {
       document.getElementByClass("stileone").style.backgroundColor = "lightblue";
   } 
   else {
        txt = "You pressed Cancel!";
   }
if (confirm('Are you sure you want to save this thing into the database?') == true) {
    // Save it!
} else {
    // Do nothing!
}

.foo {
  float: left;
  width: 30px;
  height: 30px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 25%;
}
.blue {
  background: #13b4ff;
}
.whole {
  float: left;
  width: 900px;
  height: 900px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
  
}
.purple {
  background: #ab3fdd;
}
.wine {
  background: #ae163e;
}

<!doctype html>
<head>
</head>
  <body>
    <div class = "whole">
      <div id = "centerbox1" class="foo blue">A1</div>
      <div id = "centerbox2"class="foo purple">A2</div>
      <div id = "centerbox3"class="foo wine">A3</div>
      <br>
      <br>
      <div id = "centerbox4"class="foo blue">B1</div>
      <div id = "centerbox5"class="foo purple">B2</div>
      <div id = "centerbox6"class="foo wine">B3</div>
    </div>
  </body>
</html>

这是您问题的纯Javascript解决方案。

function myFunction() {
if (confirm("Press a button!") == true) {
  if(this.style.backgroundColor == "yellow")
    this.style.backgroundColor = "";
  else
    this.style.backgroundColor = "yellow";
} else {
  txt = "You pressed Cancel!";
}
  if (confirm('Are you sure you want to save this thing into the database?') == true) {
    // Save it!
  } else {
    // Do nothing!
  }
}
var blocks = document.getElementsByClassName("foo");
for (i = 0; i < blocks.length; i++) {
  blocks[i].addEventListener("click", myFunction);
}

.foo {
  float: left;
  width: 30px;
  height: 30px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 25%;
}
.blue {
  background: #13b4ff;
}
.whole {
  float: left;
  width: 900px;
  height: 900px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
}
.purple {
  background: #ab3fdd;
}
.wine {
  background: #ae163e;
}

<div class="whole">
  <div id="centerbox1" class="foo blue">A1</div>
  <div id="centerbox2" class="foo purple">A2</div>
  <div id="centerbox3" class="foo wine">A3</div><br><br>
  <div id="centerbox4" class="foo blue">B1</div>
  <div id="centerbox5" class="foo purple">B2</div>
  <div id="centerbox6" class="foo wine">B3</div>
</div>

我不太确定您要实现的目标，并且在代码中犯了许多错误，因为开始使用事件来调用您的功能。话虽如此，这里可能会帮助您入门：

单击第一个框，看看您是单击Yes还是Cancel。

的行为

$('#centerbox1').on('click', function() {
  $(this).css('background', '#13b4ff');
  if (confirm('Do you want to do this ?')) { 
      $(this).css('background', 'yellow');
  }
})

.foo {
  float: left;
  width: 30px;
  height: 30px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 25%;
}
.blue {
  background: #13b4ff;
}
.whole {
  float: left;
  width: 900px;
  height: 900px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
  
}
.purple {
  background: #ab3fdd;
}
.wine {
  background: #ae163e;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class = "whole">
      <div id = "centerbox1" class="foo blue">A1</div>
      <div id = "centerbox2" class="foo purple">A2</div>
      <div id = "centerbox3" class="foo wine">A3</div>
      <br>
      <br>
      <div id = "centerbox4" class="foo blue">B1</div>
      <div id = "centerbox5" class="foo purple">B2</div>
      <div id = "centerbox6" class="foo wine">B3</div>
    </div>

相关内容

最新更新

热门标签：