Question

<div class="button button1" onclick="toggleClass();">Stay Updated</div>

    <script>
        function toggleClass(){
            if(className == "button button1"){
                    className = "info";
          } else {
                    className = "button button 1";
}

    </script>

尝试在单击div时更改div的类。 div应该像一个按钮，它应该被另一个div类替换。这是我的编码到目前为止，请帮忙。提前谢谢。

Answer 1

您的代码存在多个问题。首先，您在if / else语句中缺少右括号}。检查控制台 F12 以查看错误：

未捕获的SyntaxError：意外的输入结束

其次，如上面评论中所述，className不会自动存在，也不会更改元素的类。 className是DOM对象的属性。您需要获取单击的元素并引用className属性来检索并正确设置。

然而，在您可以执行此操作之前，您需要获取单击的元素。为此，请将event参数添加到内联单击处理程序：

onclick="toggleClass(event);"

并引用函数toggleClass中的事件对象：

function toggleClass(evt) {

使用target对象的event属性查找单击的元素并将其保存到变量中：

var btn = evt.target;

最后，引用btn.className代替您在函数中拥有的所有className引用。

<强>样本：

function toggleClass(evt) {
    var btn = evt.target;
  
    if(btn.className == "button button1") {
        btn.className = "info";
    } else {
        btn.className = "button button1";
    }
}

div {
  color: #fff;  
}
div.button.button1 {
  background: blue;
}
div.info {
  background: green;  
}

<div class="button button1" onclick="toggleClass(event);">Stay Updated</div>

不知道为什么这不起作用

1 个答案: