Question

我写了一个代码来创建一个切换按钮现在我创建了一个javascript来点击时弹出一个警告，但它首先显示警报然后切换按钮。我希望它首先切换，然后显示警报。我甚至尝试了3秒的setTimeout（），但它也无法正常工作

HTML：

<div class="buttonsArea">
            <div class="display" >
                 <label class="label toggle">
                      Appliance 1
                     <input type="checkbox" class="toggle_input" />
                     <div class="toggle-control" id="button1" onclick="alert(this)"></div>
                 </label>
            </div>
</div>

CSS：

box-sizing: border-box;
}

body {
 margin:auto;
  font-size: 1em;
  font-family: 'Arial', sans-serif;

}

.heading {
    margin: auto;
    width: 60%;
    border:3px solid #8AC007;
    padding: 10px;
    text-align:center;
}

.buttonsArea {
  padding-top:15%;
  width:150px;
  margin-left:auto;
  margin-right:auto;
}

.display {
  padding-top: 30px;
  position: relative;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.toggle .toggle-control {
  /*For Color transition effect*/
  -webkit-transition: 0.3s cubic-bezier(0.98, 0.99, 1, 0.99);
          transition: 0.3s cubic-bezier(0.98, 0.99, 1, 0.99);

  width: 4em;
  height: 2em;
  display: inline-block; /* changed */
  border: 2px solid #8E8E93;
  border-radius: 2em;
  background-color: rgba(0, 0, 0, 0.06);
  position: relative;
  vertical-align:middle; /* new; can be removed if desired */
}
.toggle .toggle-control:after {
  /*For Marker transition effect*/
  -webkit-transition: 0.3s cubic-bezier(0.98, 0.99, 1, 0.99);
          transition: 0.3s cubic-bezier(0.98, 0.99, 1, 0.99);
  content: "";
  width: 2em;
  height: 2em;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 3px 2px rgba(0, 0, 0, 0.4);
  position: absolute;
  top: 0;
  left: 0;
}
.toggle input {
  display: none;
}
.toggle input:checked + .toggle-control {
  border-color: #4cd964;
  background-color: #4cd964;
}
.toggle input:checked + .toggle-control:after {
  left: 2em;
}

JS：

function myFunction(contents) {
     setTimeout(function(){ alert("Clicked on"); }, 3000);
}

Plzzz帮助!!!

Answer 1

永远不会调用您的函数myFunction(contents)。当我认为您需要div#button1时，onclick alert(this)为onclick="myFunction(this)"。

我还建议您将函数myFunction重命名为更能描述其行为的名称。

Answer 2

你的功能永远不会触发。你也需要调用这个函数。如果您正在使用jQuery，请尝试类似

的内容

$('.toggle-control').click(function(){
   alert('Clicked'); 
}

Answer 3

听起来你有两个事件

点击div＃button1或点击复选框
复选框值已更改

您希望在复选框值更改（第二个事件）后警告显示，但是您将它绑定到第一个事件。我建议如下：

[width,height]

这样，无论复选框值如何变化，您都将获得所需的结果。您还可以在标签中添加标签以更改复选框的值：

<input type="checkbox" id="cb" class="toggle_input" onchange="alert(this)" />

如何先显示动画然后再发出警报

3 个答案: