Question

如何点击它来更改div类名？例如：

<div class="first_name" onclick="changeClass();" id="first_name"></div>

当用户点击div

时，我想按如下方式更改它

<div class="second_name" onclick="changeClass();"></div>

我把JavaScript写成：

<script language="javascript"> 
  function change_autorefreshdiv(){
    var NAME = document.getElementById("first_name")
    NAME.className="second_name"
  } 
</script>

它仅适用于第一个实例。这是在页面加载时，如果我点击它，first_name会变为second_name。但是再次点击它，它不会将second_name还原为first_name。

Answer 1

您必须定义第二个类名。目前，您有一个函数可以将类名更改为硬编码值，与当前类名无关。另见：MDN: if...else

function change_autorefreshdiv(){
    var NAME = document.getElementById("first_name");
    var currentClass = NAME.className;
    if (currentClass == "second_name") { // Check the current class name
        NAME.className = "first_name";   // Set other class name
    } else {
        NAME.className = "second_name";  // Otherwise, use `second_name`
    }
}

Answer 2

简单的javascript函数，将它放在你的application.js或script标签中： - （应包含jQuery以运行以下函数）

function changeClass(){
        $("#first_name").attr("class", "class-name-you-want-to-assign");
    }

Answer 3

答案很晚，但可以缩短标记为答案的反应：

function change_autorefreshdiv(){
     var NAME = document.getElementById("first_name");
     NAME.className = (NAME.className == "second_name") ? "first_name" : "second_name";
}

这是if-else结构的缩写表示法。它检查className是否等于“second_name”。如果是，则currentClass变量将变为“first_name”，如果不是（意味着它是“first_name”），它将成为“second_name”。

Answer 4

那是因为没有代码可以这样做。加一点检查。我还添加了一些分号。我想知道你的剧本是否会第一次工作。

<script language="javascript"> 
function change_autorefreshdiv(){
  var NAME = document.getElementById("first_name");
  if (NAME.className==="second_name")
  {
    NAME.className="first_name";
  }
  else
  {
    NAME.className="second_name";
  }
}   
</script>

Answer 5

您必须使用if语句来反转它。这是一个例子：

function change_autorefreshdiv(){
    var NAME = document.getElementById("first_name")
    var currentClass = NAME.className;
    if(currentClass == "second_name"){
        NAME.className = "first_name";
    } else {
        NAME.className = "second_name";
    }
}

单击时更改div的类？

5 个答案: