Блог

Как я могу изменить имя класса 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 значение «Кому».

Вы должны определить имя второго класса. В настоящее время у вас есть функция, которая изменяет имя класса на жестко заданное значение, независимое от текущего имени класса. Смотрите также: 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`
    }
}   
 

простая функция javascript, поместите ее в свой application.js , или тег скрипта:- (jQuery должен быть включен для запуска следующей функции)

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

Довольно поздний ответ, но реакция, отмеченная как ответ, может быть сокращена:

 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».

Это потому, что для этого нет кода. Добавьте небольшую проверку. Я также добавил несколько точек с запятой. Интересно, сработает ли ваш скрипт вообще в первый раз.

 <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>
 

Вы должны использовать 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";
    }
}