Переключить 3 класса onclick (Только переключить 2)

Question

Моя функция переключения переключается только через 2 из 3 классов, а не третью. Он пропускает мой звездный класс и просто переключает между моим фактом и классами barr. Я изменил все вокруг, и он переключается только на 2 из 3 классов.

Мой Html

<div id="labalt"><a href="#">Alt</a></div> 
    <h1 id="build_title" class="barr" >Barracks</h1> 

Мой код

$("#labalt").click(function() { 
    $(this).toggleClass("fact star barr"); 

if($(this).hasClass("fact")) 
    { 
    $("#build_title").html("Factory"); 
    } 
else if($(this).hasClass("star")) 
{ 
    $("#build_title").html("Starport"); 
    } 
else 
{ 
    $("#build_title").html("Barracks"); 
    } 
}); 

Answer 1

Вы пытаетесь получить код для циклического перехода по всем трем текстам на три последовательных щелчка? Потому что это не то, что делает toggleClass. toggleClass включает или выключает один или несколько классов.

As you can tell by this fiddle, нажав на ссылку, можно переключить границу, размер шрифта и курсив.

Не начинается ни один из классов. В клике 1 он будет иметь все три класса. Он будет соответствовать первому условию (он имеет класс fact), и поскольку они равны else if, никакие другие условия не будут проверяться. Текст будет просто установлен на «Factory».

При втором нажатии все три класса будут удалены. Он не будет соответствовать первым критериям (fact) или второму (star), поэтому он установит текст в «Бараки».

На третьем клике все три класса будут добавлены снова.

Если вы хотите, чтобы он проходил через классы, вам придется реализовать это вручную; Я не знаю, что для этого есть какое-то решение. Вам нужно либо сохранить какой-то курсор, либо непрерывно итерировать массив, чтобы проверить, какой класс в данный момент активен, а затем перейти к следующему. Example; Я уверен, что это может быть опрятно.

Answer 2

Это попытка ... ты не должен делать

$("#labalt").click(function() { 
$(this).toggleClass("fact star barr"); 

if($(this).hasClass("fact")) 
{ 
    $("#build_title").html("Factory"); 
} 
if($(this).hasClass("star")) 
{ 
    $("#build_title").html("Starport"); 
} 
if($(this).hasClass("barr")) 
{ 
    $("#build_title").html("Barracks"); 
} 
}); 

Answer 3

Вот рабочий пример: http://jsfiddle.net/LRuZp/1/

I Угадайте, есть проблема с вашими условными утверждениями.

Case 1. <div id="labalt" class="fact"></div> 

    Result after toggling: <div id="labalt" class="star barr"> 

Case 2. <div id="labalt" class="fact star"></div> 

    Result after toggling: <div id="labalt" class="barr"> 

Case 3. <div id="labalt" class=""></div> 

    Result after toggling: <div id="labalt" class="fact star barr"> 

Использование собственных условных операторов:

if($(this).hasClass("fact")) 
{ 
$("#build_title").html("Factory"); 
} 
else if($(this).hasClass("star")) 
{ 
$("#build_title").html("Starport"); 
} 
else 
{ 
    $("#build_title").html("Barracks"); 
} 

В то время, может быть два класса.

Дело 1: Второе, если для условия установлено значение true, а последнее условие не снято. Таким образом, последнее условие никогда не выполняется, если присутствует «звездный» класс, что логически неверно, если присутствуют оба класса «звездный барр».