Изменение диапазона на клик Jquery

Question

Я этот код

\t $('a').click(function() { 
 
\t \t $('a span').first().addClass('hide'); 
 
    \t \t $('a span:nth-child(2)').removeClass('hide'); 
 
       $('a span:nth-child(2)').addClass('display'); 
 
\t });

.hide { 
 
    display:none; 
 
} 
 

 
.display { 
 
    display:block; 
 
}

<a href="#"> 
 
    <span>Hello</span> 
 
    <br> 
 
    <span class="hide">World</span> 
 
</a>

Когда я нажимаю на ссылку, я хочу появится первый пролет шкура и второй пролет.

Я хочу сделать это несколько раз (щелкните по этой ссылке несколько раз и получите одинаковый результат).

Я пытаюсь сделать это с этим Jquery код

Answer 1

Я бы просто переключать классы и вы должны предотвратить дефолт по ссылке, он не пытается покинуть страницу.

$('a').click(function(e) { 
    e.preventDefault(); 
    $('a span').toggleClass('hide show'); 
}); 

вот work demo

Answer 2

Я хотел бы сделать что-то вроде этого. Пронумеруйте детей из a и замените их классы. Выполнение этого метода позволяет вам делать другие вещи, а также просто переключать класс, например, добавлять атрибуты text/css в span.

$('a').click(function() { 
    $(this).children().each(function(index, element) 
    { 
     if ($(this).hasClass('hide')) 
     { 
      $(this).removeClass('hide'); 
      $(this).addClass('display'); 
     } 
     else 
     { 
      $(this).removeClass('display'); 
      $(this).addClass('hide'); 
     } 
    }); 
}); 

Вот JS Fiddle вышеуказанного

Answer 3

код Это должен делать то, что вы ищете:

HTML:

<a class='hide-clicker' href="#"> 
    <span>Hello</span> 
    <span class="hide">World</span> 
</a> 

JQuery:

$("a.hide-clicker").click(function(e) { 
    e.preventDefault(); 
    $(this).find('span').toggleClass('hide'); 
}); 

CSS:

.hide { 
    display:none; 
}