установить класс для нескольких div - PullRequest
0 голосов
/ 29 августа 2011

Я использую эффект наведения мышки для нескольких делений.Указатель мыши манипулирует классом всех элементов div, устанавливая единицу как "class = 'active'", чтобы его можно было увидеть.Теперь я пытаюсь «сбросить» изменения определенного события, например, «щелкнуть».Мой код мышки (с использованием jQuery) выглядит следующим образом:

$(document).ready(function() {
    switches = $('#switches > span');
    slides = $('#slides > div');
    switches.each(function(idx) {
            $(this).data('slide', slides.eq(idx));
        }).hover(
        function() {
            switches.removeClass('active');
            slides.removeClass('active');             
            $(this).addClass('active');  
            $(this).data('slide').addClass('active');
        });
    });

И теперь у меня есть несколько div мышью, что приводит к следующему html-файлу

<html>
<head>

<title>test</title>

<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript" src="switch.js"></script>

<style type="text/css">

#switches .active {
  font-weight: bold;
}

#slides div {
  display: none;
}

#slides div.active {
  display: block;
}

</style>

</head>
<body>


<div id="slides">
  <div id="slide1" class="active">Well well.</div>
  <div id="slide2">Oh no!</div>
  <div id="slide3">You again?</div>
  <div id="slide4">I'm gone!</div>
</div>

<div id="switches">
  <span id="switch1" class="active">First slide</span>
  <span id="switch2">Second slide</span>
  <span id="switch3">Third slide</span>
  <span id="switch4">Fourth slide</span>
</div>


<br><a href = "javascript:void(0)" onclick ="switches.removeClass('active');slides.removeClass('active');$(switch1).attr('class','active');$(slide1).attr('class','active')">Reset</a>

<div id="slides">
  <div id="slide1" class="active">Well well.</div>
  <div id="slide2">Oh no!</div>
  <div id="slide3">You again?</div>
  <div id="slide4">I'm gone!</div>
</div>

<div id="switches">
  <span id="switch1" class="active">First slide</span>
  <span id="switch2">Second slide</span>
  <span id="switch3">Third slide</span>
  <span id="switch4">Fourth slide</span>
</div>

Для первой группы divСброс работает хорошо, но иногда второй остается неизменным.Как я могу обойти эту проблему?

Ответы [ 2 ]

4 голосов
/ 29 августа 2011

идентификаторы должны быть уникальными. Вы должны изменить switches и slides на классы вместо идентификаторов.

1 голос
/ 29 августа 2011

Я думаю, что проблема связана с div, имеющими одинаковый идентификатор.Попробуйте назвать 2-ю группу, например, slides_2 и switch_2, и выберите частичный идентификатор $ (id ^ = "slides").

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...