#javascript
#javascript
Вопрос:
У меня есть функция, которая изменяет имя класса в 3 подразделениях при нажатии кнопки, и мне это нужно, чтобы имя класса менялось обратно при повторном нажатии кнопки. Все три подразделения имеют имя класса w-33 , кнопка div, при нажатии на которую имя этого подразделения изменяется на w-60 , а двух других на w-20 .
Я предполагаю, что там должен быть другой if() , я пробовал это:
var fp = document.getElementById("first-project");
if (fp.classList.contains("w-60")) {}
Но я не знаю, как это сделать правильно, чтобы это, похоже, не сработало.
Вот HTML:
<div class="w-33" id="first-project">
<a class="learn-more" onclick="changeClass(1)">Learn More</a>
</div>
<div class="w-33" id="second-project">
<a class="learn-more" onclick="changeClass(2)">Learn More</a>
</div>
<div class="w-33" id="third-project">
<a class="learn-more" onclick="changeClass(3)">Learn More</a>
</div>
Вот функция:
function changeClass(div_number) {
if(div_number==1) {
document.getElementById("first-project").className="w-60";
document.getElementById("second-project").className="w-20";
document.getElementById("third-project").className="w-20";
}
if(div_number==2) {
document.getElementById("first-project").className="w-20";
document.getElementById("second-project").className="w-60";
document.getElementById("third-project").className="w-20";
}
if(div_number==3) {
document.getElementById("first-project").className="w-20";
document.getElementById("second-project").className="w-20";
document.getElementById("third-project").className="w-60";
}
}
Вот HTML-код после нажатия на первую ссылку div:
<div class="w-60" id="first-project">
<a class="learn-more" onclick="changeClass(1)">Learn More</a>
</div>
<div class="w-20" id="second-project">
<a class="learn-more" onclick="changeClass(2)">Learn More</a>
</div>
<div class="w-20" id="third-project">
<a class="learn-more" onclick="changeClass(3)">Learn More</a>
</div>
Мне это нужно, поэтому, если снова щелкнуть по div с номером 1, когда имя класса для first-project уже w-60 указано, то имена классов для всех трех divs должны измениться обратно на w-33 , в основном изменяя то, что делает функция.
Комментарии:
1. Вы должны проверить className каждого div, чтобы увидеть, содержит ли он w-60 или w-33, а затем, основываясь на этом, измените className по своему усмотрению.
Ответ №1:
Добавляя button класс к каждому div , вам больше не нужен id атрибут:
<div class="button w-33">
<a onClick="toggleClass(event)" href="#">Learn More</a>
</div>
<div class="button w-33">
<a onClick="toggleClass(event)" href="#">Learn More</a>
</div>
<div class="button w-33">
<a onClick="toggleClass(event)" href="#">Learn More</a>
</div>
А затем с помощью JavaScript:
function toggleClass(event) {
event.preventDefault();
// Get the clicked link parent div
var element = event.target.parentNode;
// Get all buttons
var buttons = document.querySelectorAll('.button');
// If the clicked button has the w-33 or the w-20 class
if(element.classList.contains('w-33') || element.classList.contains('w-20')) {
// Change class to w-60
element.classList.remove('w-33', 'w-20');
element.classList.add('w-60');
// Leave every other button with the w-20 class
buttons.forEach(function(button) {
if(button != element) {
button.classList.remove('w-33', 'w-60');
button.classList.add('w-20');
}
});
}
// In any other case
else {
// Set all buttons back to the w-33 class
buttons.forEach(function(button) {
button.classList.remove('w-60', 'w-20');
button.classList.add('w-33');
});
}
}
Вы можете увидеть живой пример на этом ручке.
Таким образом, вам не нужно будет обновлять свой код, чтобы добавить больше кнопок.
Ответ №2:
Приведенный ниже код будет работать, когда вы снова нажмете на тот же div.
Примечание: В качестве требования pere, когда div уже имеет w-60, и вы нажимаете на другой div, у которого есть w-20, класс не будет сброшен.
function changeClass(div_number) {
var fp = document.getElementById("first-project");
var sp = document.getElementById("second-project");
var tp = document.getElementById("third-project");
if (div_number == 1) {
if (fp.classList.contains("w-60")) {
resetClassname(fp, sp, tp);
}
else {
fp.className = "w-60";
sp.className = "w-20";
tp.className = "w-20";
}
}
if (div_number == 2) {
if (sp.classList.contains("w-60")) {
resetClassname(fp, sp, tp);
}
else {
fp.className = "w-20";
sp.className = "w-60";
tp.className = "w-20";
}
}
if (div_number == 3) {
if (tp.classList.contains("w-60")) {
resetClassname(fp, sp, tp);
}
else {
fp.className = "w-20";
sp.className = "w-20";
tp.className = "w-60";
}
}
}
function resetClassname(fp, sp, tp) {
fp.className = "w-33";
sp.className = "w-33";
tp.className = "w-33";
}
Комментарии:
1. Просто имейте в виду, что если вы добавите больше divs, вам нужно будет обновить свой код, чтобы справиться с этим.
Ответ №3:
<script>
function changeClass(div_number) {
if (div_number == 1) {
if (document.getElementById("first-project").className == "w-60")
document.getElementById("first-project").className = "w-33";
else
document.getElementById("first-project").className = "w-60";
if (document.getElementById("second-project").className == "w-20")
document.getElementById("second-project").className = "w-33";
else
document.getElementById("second-project").className = "w-20";
if (document.getElementById("third-project").className == "w-20")
document.getElementById("third-project").className = "w-33";
else
document.getElementById("third-project").className = "w-20";
}
if (div_number == 2) {
document.getElementById("first-project").className = "w-20";
document.getElementById("second-project").className = "w-60";
document.getElementById("third-project").className = "w-20";
}
if (div_number == 3) {
document.getElementById("first-project").className = "w-20";
document.getElementById("second-project").className = "w-20";
document.getElementById("third-project").className = "w-60";
}
}
</script>
<br />
<div class="w-33" id="first-project">
<a class="learn-more" onclick="changeClass(1)">Learn More</a>
</div>
<div class="w-33" id="second-project">
<a class="learn-more" onclick="changeClass(2)">Learn More</a>
</div>
<div class="w-33" id="third-project">
<a class="learn-more" onclick="changeClass(3)">Learn More</a>
</div>
please check the code
я добавил некоторый оператор if при нажатии на div, чтобы изменить имя класса, например
if (document.getElementById("first-project").className == "w-60")
document.getElementById("first-project").className = "w-33";
else
document.getElementById("first-project").className = "w-60";
сначала оператор if проверяет имя класса, если изменено, затем возвращает роль в else, изменяя имя класса.
Комментарии:
1. Попробуйте улучшить свой ответ, выполнив некоторые пояснения и правильное форматирование.