Изменение класса Div по щелчку

Question

Я пытаюсь изменить класс Div при щелчке. То, что я сейчас пытаюсь сделать:

Я получил это на моей диве:

onclick"changeClass()" 

и это моя функция

function changeClass(){ 
    $("#test123").attr("class", "classname"); 
} 

Однако это не работает. Вы должны теперь, когда я произвожу много див с Id test123 с петлей Еогеаспа так, что может быть проблемой, но я не совсем уверен,

Answer 1

Вы забыли =:

onclick="changeClass()" 

Кроме того, необходимо указать, какие ?

onclick="changeClass(this)" 

Затем в коде:

function changeClass(which) { 
    $(which).attr("class", "classname"); 
} 

Вместо всего этого, так как вы используете JQuery, вы можете это сделать простым способом:

$(function() { 
 
    $("div").click(function() { 
 
    this.className = "classname"; 
 
    }); 
 
});

.classname { 
 
    background: #ccf; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="test1">Test 1</div> 
 
<div id="test2">Test 2</div> 
 
<div id="test3">Test 3</div> 
 
<div id="test4">Test 4</div>

Если вы хотите несколько классов, всегда лучше добавлять и удалять cl жопа.

$(function() { 
 
    $("div").click(function() { 
 
    $(this).addClass("classname"); 
 
    }); 
 
});

.classname { 
 
    background: #ccf; 
 
} 
 
.myClass { 
 
    font-weight: bold; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="test1">Test 1</div> 
 
<div id="test2" class="myClass">Test 2</div> 
 
<div id="test3">Test 3</div> 
 
<div id="test4" class="myClass">Test 4</div>

Таким образом, это не влияет на предыдущие классы.

Answer 2

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/onclick

OnClick
Тип: код сценария
Этот обработчик события вызывается, когда объект будет нажат.

Пример
< изображение SRC = "hello.png" OnClick = "предупреждение ('Привет')" />

Как описано на примере, она должна быть записана в виде onclick=foo(args)

changeClass = function(){ 
 
    document.querySelector("div").setAttribute('class', 'black'); 
 
}

.red { 
 
background: red; 
 
} 
 
.black { 
 
background: black; 
 
}

<div class="red" onclick="changeClass()"> 
 
    lorem 
 
</div> 
 
<br> 
 
<button onclick="changeClass()">click me to change class</button>