jquery настроить div при наведении на другой div

Question

jquery настроить div при наведении на другой div

0

У меня есть несколько img-иконок, которые ссылаются на различные внешние сайты (электронная почта, facebook, твиттер и т.д.) Onclick, и я пытаюсь показать им скрытый текст в другом div на hover.

Вторая скриптовая ссылка в этом потоке выполняет нечто похожее на то, что я хочу делать с CSS, однако я пытаюсь оживить show/hide с помощью jQuery slideToggle(), который я уже реализовал в других частях страницы, поэтому css не будет делать.

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

    $('div.tooltip').hide();
$('img.tooltip').hover(function() {

    which = $(this).attr("class");
    selector = 'div.' + which;
    slide = $(selector).slideToggle();
    console.log(slide);
});

ps - Я думал, может быть, проблема в том, что когда я вызываю slideToggle() он не slideToggle() вызов hide() в строке 1, но когда я прокомментировал этот вызов и вместо этого изменил что-то простое, как цвет шрифта, до сих пор нет кубиков.

edit: для уточнения, img и его соответствующие div имеют одинаковые img.tooltip email (например, img.tooltip email должна запускать div.tooltip email и т.д.), поэтому я использую "какой" и "селектор".

wkd 24 сен. 2013, в 11:38

Источник

Теги:

jquery

html

slidetoggle

jquery-hover

2 ответа

Ещё вопросы

DGS · Answer 1 · 2013-09-24T07-02-00.000Z

Ваша проблема более чем вероятна с линией, which = $(this).attr("class"); который будет возвращать пробельный список всех классов, которые имеет этот элемент. Так как изображение имеет хотя бы .tooltip это означает, что selector будет выглядеть как div.tooltip someotherclass который будет искать элемент типа someotherclass который является потомком div с подсказкой класса. Поскольку, скорее всего, не будет типа элемента какого-либо someotherclass это ничего не вернет.

Редактировать:

Если вы используете только два класса, например, в своем вопросе, вы можете изменить свой код на

$('img.tooltip').hover(function() {
    which = $(this).attr("class").replace('tooltip', '').replace(' ','');
    selector = 'div.' + which;
    slide = $(selector).slideToggle();
    console.log(slide);
});

который удалит класс tooltip из строки класса, which = 'email' составляет which = 'email' а не which = 'tooltip email'

К сожалению, возможно, у меня только что произошла ошибка основного синтаксиса - я хочу, чтобы у img были и tooltip и классы email/facebook/etc , и при наведении slideToggle мыши должен slideToggle div с идентичным именем класса. Разве разделение классов с пробелом не делает этого?
нет, потому что когда вы делаете $(this).attr("class") он возвращает строку, которая содержит все классы этого элемента в формате с разделением пробелами. Мой ответ не избавляет класс tooltip от элемента, который он просто игнорирует при поиске класса
Хорошо - я не понимаю, почему получить строку, разделенную пробелом, было бы плохо, хотя, пока я добавляю эту строку к 'div.' как я делаю с selector . Это решение выдает ошибку для меня, похоже, оно вставляет пробел вместо tooltip так что селектор оказывается div. email Я никогда не делал скрипку, и у меня возникают проблемы с тем, чтобы она работала должным образом, но вот, если это поможет: jsfiddle.net/B5s56
обновлено для удаления пробелов. Проблема с наличием разделенной пробелами строки заключается в том, что в итоге вы получите селектор div.tooltip email который ищет узел типа email, который является потомком div с всплывающей подсказкой класса. Он никогда ничего не найдет, так как нет узлов HTML типа email.
Ах, мы идем. Большое спасибо за помощь!

mitchfuku · Answer 2 · 2013-09-24T07-28-00.000Z

Есть ли

slide = $('div.tooltip').slideToggle();

не работа? Я смущен, почему вам нужны первые две строки этой функции.

Это работает, но показывает каждую всплывающую подсказку, когда я просто хочу показать ту, которая принадлежит значку, который вызывает slideToggle. Думаю, что моя проблема связана с вложением CSS, которое описывает @DGS