Как правильно прописать событие hover, чтобы не конфликтовали классы?

Question

[triowinner]

Здравствуйте.
Заранее извиняюсь, знаю что вопрос для "чайников", просто я только недавно стал изучать скрипты.

Допустим у меня есть одинаковые ссылки, на которые я повесил событие hover и спрятал блок через метод .hide. Когда я навожу на ссылку, то метод .show показывает все блоки одновременно, а мне нужно, чтобы срабатывало поочередно т.е. я навел на ссылку и событие .show показало только один блок.

Пример кода

$(function() {
$('a').hover(function() {
  $('.block').show();
 },
 function() {
  $('.block').hide();
 });
});

Answer 1

[triowinner]

Спасибо, я уже сам разобрался, с помощью добавления аттребут.
Если кому интересно.

<a data=".bloсk1">Наведи 1</a>
<a data=".bloсk2">Наведи 2</a>
<a data=".bloсk3">Наведи 3</a>

<div class="block1">1</div>
<div class="block2">2</div>
<div class="block3">3</div>

$('a').hover(function() {
  var hoverLink = $(this).attr('data');
    if ( $(hoverLink).is(':hidden') ) {
      $(hoverLink).show(0);
    } else {
      $(hoverLink).hide(0);
    }
});

Answer 2

[Олег]

Можно без скриптов, на голом css сделать.

Comments

[triowinner]

Я это знаю, мне нужна практика с jQuery, поэтому хочу это сделать именно через jQuery.

[gleendo]

triowinner: Вы начале обучение с JQuery, минуя JS? Когда уже подобное прекратится...

[triowinner]

iamevg_: простите, почему минуя?

[gleendo]

triowinner: судя по вопросу, вы его благополучно миновали.

[triowinner]

iamevg_: допустим миновал и что ? Я не понимаю, к чему это "словоблудие", когда можно указать на мою ошибку и привести конкретный пример в коде. Я запомнил, получил знания, поблагодарил и пошел дальше. Или я пропустил на сайте надпись жирным шрифтом "Чайникам тут не место"?

[gleendo]

triowinner: Сначала несогласие, потом уже допустим...ясно в общем.
Знаете как говорится, лучше дать удочку, чем рыбу.
В вашем случае удочка, это мой совет, решение которое вы просите, это рыба. Сегодня вам дали решение, завтра вы опять придете, и будете просить "рыбы". Заканчивайте уже задом наперед двигаться. Изучите хорошо pure JS, потом уже беритесь за вспомогательные инструменты, иначе вы так и будете пол жизни задавать подобные вопросы, ничего не понимая.
Тут все таки не роботы сидят, им вопрос, они вам ответ. Все таки есть более опытные люди, которые могут дать совет, и желательно к нему прислушаться.

[triowinner]

iamevg_: после ваших советов, мне честно сказать уже не хочется тут задавать вопросы, потому, что придут вот такие вот эксперты (без обид), и будут указывать пальцем на "книжку". Пример с удочкой и рыбой в данном случае не актуален т.к. важную роль в поимке рыбы играют и прикормка, и место ловли, и на что ловить, а не чем. Есть две категории врачей - одни лечат, другие советы дают, как не болеть. В данном случае вы относитесь к второй категории "врачей". За сим нет смысла больше вести этот диалог. Удачи.

[gleendo]

triowinner: болейте дальше...

[Kovalsky]

triowinner: "после ваших советов, мне честно сказать уже не хочется тут задавать вопросы, потому, что придут вот такие вот эксперты (без обид), и будут указывать пальцем на книжку" - и это правильный подход, просто замечательные слова. Особенно в виду того факта, что тостер это не фонд поддержки ленивых людей и не отряд специалистов в синих трико, которые готовы придти на помощь при первом зове. Это Q&A.

Answer 3

[Иван Корюков]

Внутри обработчика событий можно ссылать непосредственно на элемент, который это событие произвёл через $(this). Вроде как-то этот элемент ещё можно достать из объекта события, но я постоянно забываю как)

$(function() {
$('a').hover(function() {
  $(this).show();
 },
 function() {
  $(this).hide();
 });
});

Comments

[triowinner]

Извините, но мне нужно конкретное решение, а не "вроде")

[Иван Корюков]

triowinner: Конкретное решение я уже показал. Через $(this) вы можете управлять как самим элементом, вызывавшим событие, так и его дочерними/родительскими элементами.
То что "вроде" - это лишь указание на то, что есть и другой способ добраться до этого элемента, и если вам вдруг не понравиться $(this), то вы теперь знаете в каком направлении копать - искать документацию по объекту события, который передаётся как первый аргумент в обработчик.

[gleendo]

Иван Корюков:

Вроде как-то этот элемент ещё можно достать из объекта события

event.target

[Иван Корюков]

iamevg_: ай, красава! иди облобызаю =*

[Kovalsky]

triowinner: за конкретными решениями - на freelance.ru

Answer 4

[Павел]

а я все же на css бы сделал

a:hover .block{
    display: block;
}

Answer 5

[Егор Живагин]

А вы понимаете, почему так происходит? Классы не конфликтуют, это логичное поведение, селектор .block относится к нескольким элементам, соответственоо $('.block') - массив этих элементов.

Много способов есть. Зависит от разметки. Универсальный - поставить data-атрибуты. Менее универсальный - работать с $(this)

Раз вы только учитесь, вам дают правильные советы, а не готовые решения. Учить jQuery не зная JS - зло. Это бессмысленно.
Кстати, достаточно забить этот вопрос в поиске по тостеру (или в гугле) - будет миллион ответов с решениями.