Переключение между скрытыми элементами Div на странице с одинаковым классом влияет на все элементы Div - PullRequest
Новая
       3

Переключение между скрытыми элементами Div на странице с одинаковым классом влияет на все элементы Div

0 голосов
/ 20 апреля 2011

У меня есть 2 div на моей странице с индивидуальными идентификаторами. В этих элементах div у меня есть неупорядоченный список с одним и тем же классом (.stats-nav): 

<div id="product1">
<ul class="stats-nav">
    <li class="stat-cat1"><a href="">Ingredients</a></li>
    <li class="stat-cat2"><a href="">Nutrition Info</a></li>
    <li class="stat-cat3"><a href="">Feeding Instructions</a></li>
</ul>
</div><!--end product1-->

<div id="product2">
<ul class="stats-nav">
    <li class="stat-cat1"><a href="">Ingredients</a></li>
    <li class="stat-cat2"><a href="">Nutrition Info</a></li>
    <li class="stat-cat3"><a href="">Feeding Instructions</a></li>
</ul>
</div><!--end product2-->

Только 1 из дивов показывается одновременно; другой скрыт (показать / скрыть). То же самое относится и к элементам списка: одновременно отображается только один элемент. Состояние по умолчанию: «Ингредиенты».

Я использую Jquery для привязки: 

$("li.stat-cat1 a").live('click', function() {
$(".nutritional-info").show();
return false;
});

Проблема, с которой я сталкиваюсь, заключается в том, что если я смотрю на # product2 и нажимаю «Информация о питании», а затем нажимаю на # product1, он покажет правильную информацию # product1, но он начнется с того места, где я остановился » Пищевая ценность ", а не состояние по умолчанию" Ингредиенты ".

Есть ли способ для меня "очистить" последнее состояние div?

(Если я загружаю его через ajax .load, содержимое обновляется, как и предполагалось, но я больше не хочу использовать метод ajax).

Спасибо!

Ответы [ 2 ]

0 голосов
/ 20 апреля 2011

Я думаю, что ваша проблема в том, что ваш селектор $ (". Nutritional-info") находит все элементы на странице независимо от того, видим их родительский элемент div или нет.Чтобы отфильтровать действие только для видимого продукта, попробуйте что-то вроде: 

$("li.stat-cat1 a").live('click', function() {
    $("div:visible .nutritional-info").show();
    return false;
});
0 голосов
/ 20 апреля 2011

Я не уверен, что правильно понимаю, но похоже, что вы применяете свое событие к обоим 'li.stat-cat1'. Похоже, вам нужно изолировать каждого. Или что вам нужно ссылаться на отдельную ссылку относительно клика. Я не вижу ни одного класса под названием «Информация о питании», поэтому я предполагаю, что это ребенок ул. 

$("li.stat-cat1 a").live('click', function() {
    $(".nutritional-info").hide();//hide all
    $(this).closest('stats-nav').find(".nutritional-info").show();
});

EDIT: После дальнейших размышлений вам может понадобиться добавить новый класс в событие click. 

$("li.stat-cat1 a").live('click', function() {
    $(".nutritional-info").show();
    $(".nutritional-info").addClass('selected')
    return false;
});

Тогда вы можете найти его позже: 

$(".nutritional-info.selected")
...