Скрыть или показать, если текущий, JQuery

Question

У меня есть этот список:

<ul class="pagination">
    <li class="dl-nav-1 current"><a href="#">Spring Training 2001</a><span class="visible"><img src="img/indicator.png" alt="" /></li>
    <li class="dl-nav-2"><a href="#">NFL 2011</a><span class="hidden"><img src="img/indicator.png" alt="" /></span></li>
    <li class="dl-nav-3"><a href="#">Fantasy Baseball</a><span class="hidden"><img src="img/indicator.png" alt="" /></span></li>
</ul>

Мне нужно показать <span>, когда класс li является текущим, и скрыть <span>, когда он не текущий.

Существует плагин JS, который изменит класс li, поэтому, когда он меняется на текущий, делает <span> видимым, а когда он удаляет текущий, скрывает <span>

ужасная попытка:

$(function) () {
    if($(ul.pagination li).hasClass("current")) {
        $("ul.pagination li.current span").removeClass("visible").addClass("hidden");
    } 
    else{
        $("ul.pagination li.current span").removeClass("hidden").addClass("visible")
    }

};

Answer 1

Вам нужен только javascript для переключения классов, CSS может сделать все остальное:

ul.pagination li.current span {
    display:inline;
}

ul.pagination li span {
    display:none;   
}

Затем, используя пример Джастина808, вы сделаете что-то подобное для javascript:

function ToggleIndicator(liClass) {
    $('.'+liClass).toggleClass('current');
}

$('#clickme').click(function() { ToggleIndicator('dl-nav-3');}); 

Формируя jsfiddle Джастина808, вы получаете это: http://jsfiddle.net/uwTEZ/1/

Answer 2

Здесь - это пример, который будет скрываться и показываться в зависимости от ваших классов.Каждый раз, когда вы меняете свои классы, вызывайте функцию «UpdateIndicators».

Обновление :

Если вы хотите обновить индикаторы с помощью JavaScript, здесь пример с функцией переключения.

Answer 3

Чтобы получить текущий ток:

Li [класс $ = ток]

http://weblogs.asp.net/stevewellens/archive/2011/02/13/jquery-selector-tester-and-cheat-sheet.aspx

Answer 4

С помощью jQuery вы можете легко добавить / удалить этот класс из элемента следующим образом:

$('.dl-nav-1').find('span').addClass('visible');
$('.dl-nav-2').find('span').removeClass('visible').addClass('hidden');

Более простой способ сброса всех элементов списка перед установкой одного из них на текущий:

$('.pagination').children().find('span').removeClass('visible').addClass('hidden');