Jquery показать / скрыть. Несколько экземпляров класса

Question

Мне удалось разобрать небольшой кусочек Jquery, чтобы показать и скрыть элемент div, основываясь на том, что кто-то наводит курсор на родительский элемент div. Я хочу использовать одни и те же классы, чтобы иметь несколько экземпляров этого на странице. Код выглядит следующим образом:

<script type="text/javascript">
$(document).ready(function(){
$('.focus_hidden').hide();
    $('.focus_col').hover(function() {
    $('.focus_hidden').slideToggle();
    return false;
    })
})
</script>

Answer 1

Я понимаю, что у каждого focus_col есть focus_hidden.
Один метод - поместить два элемента в один и тот же родительский элемент:

<div class="focus">
  <div class="focus_col">COL1</div>
  <div class="focus_hidden">HIDDEN1</div>
</div>
<div class="focus">
  <div class="focus_col">COL2</div>
  <div class="focus_hidden">HIDDEN2</div>
</div>

$('.focus_col').hover(function() {
  $(this).closest('.focus').find('.focus_hidden').slideToggle();
  return false;
})

см. Мой jsfiddle, например: http://jsfiddle.net/bouillard/VPG5S/

Но правильный метод будет зависеть от вашей организации html.
Другой метод может использовать данные для связи элементов: http://jsfiddle.net/bouillard/kCbaT/

Answer 2

Было бы полезно, если бы вы включили соответствующий HTML, но, по сути, ваша проблема в том, что вы используете другой общий селектор в своей функции наведения, когда действительно в этот момент вы должны ориентироваться на DOM относительно находящегося элемента.

Например:

  <div class="parent">
    <div class="focus_col">
       Roll over me
    </div>
    <div class="focus_hidden">
       Hidden stuff!
      </div>
  </div>

  <div class="parent">
    <div class="focus_col">
       Or roll over me too
    </div>
    <div class="focus_hidden">
       Some more hidden stuff!
    </div>
  </div>

Затем слегка измените jQuery, чтобы в функции наведения он выбирал правильный focus_hidden на основе текущего элемента, над которым наведен курсор:

$('.focus').hover(function() {
    $('.focus_hidden', $(this).parent()).slideToggle();
    return false;
})

Мои знания об эффективности различных селекторов не так уж велики, поэтому, возможно, кто-то может добавить комментарий, чтобы заявить, можно ли улучшить вышеперечисленное.Это зависит от того, насколько гибким вы хотите быть в своем дизайне;Например, если вы знаете, что div focus_hidden будет всегда следовать за focus_col, вы можете сразу перейти к нему с помощью next ().

Кроме того, я бы удалил вызов .hide () ипросто измените CSS так, чтобы focus_hidden был скрыт по умолчанию, сэкономив немного обработки на стороне клиента.

Answer 3

Часть вашего кода, читающая таким образом ...

$('.focus_col').hover(function() {
  $('.focus_hidden').slideToggle();
  return false;
})

применяет .slideToggle ко всем focus_hidden элементам всякий раз, когда любой элемент focus_col находится при наведении. Если вы хотите применить поведение к конкретному элементу, который был найден, вам нужно использовать $(this) например, $(this).slideToggle()

Но вашему вопросу не хватает ясности ...