Intereting Posts
WebView, добавить локальный файл .CSS на HTML-страницу? Переключить высоту DIV на `onClick` Как остановить контент, подпрыгивающий за неподвижным навигатором, используя jQuery Javascript html вызов внешнего объекта из внешнего файла Каковы все допустимые самозакрывающиеся элементы в XHTML (как реализованы основными браузерами)? CSS3 100vh не является постоянным в мобильном браузере Div разваливается при использовании float Настройка файла cookie с Javascript Выберите несколько строк таблицы HTML с помощью Ctrl + click и Shift + click Как проверить входы, динамически создаваемые с помощью ng-repeat, ng-show (угловой) Когда следует использовать атрибут name в HTML4 / HTML5? Полноэкранное видео без черных границ StringTemplate удаляет как разделители Рефакторинг / Улучшение базового упражнения JavaScript – превратите числовую оценку в графу букв переполнение: скрытый вызывает белую границу с переходом css

Почему wont $ (this) .children () работает для меня?

EDITED *** Спасибо за помощь ниже. Я понимаю $ (this) .children () сейчас, и у меня он работает … несколько. Мне нужна помощь, чтобы получить 100%.

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

Все значки имеют один и тот же class. Все выпадающие списки выглядят одинаково (и имеют один и тот же class), и я использую один class в коде jQuery для всплывающей подсказки и раскрывающегося списка.

Теперь я вижу, что, используя .children (), он сначала вытащит прямого ребенка. Он работает с .hover (), чтобы отобразить всплывающую подсказку. Тем не менее, для других эффектов (расширение всплывающей подсказки, скользящее выпадение, вы можете видеть в коде), ничего не происходит .click (). Я добавил $ (this) .children () последовательно, поэтому не уверен, почему он работает в одном месте, но не в другом. Всем приветствуется всяческая помощь. Спасибо за помощь до сих пор.

Теперь для кода … (простите меня за то, что отступ не был отличным, я не уверен, что я единственный, кто испытывает проблемы с копированием / вставкой вещей здесь, но он всегда прикручивается. некоторые, но не 100%)

HTML:

Stream
What's up

JQuery:

 $(document).ready(function() { var clicked = false; // tooltip hover $("div.topIconNew, div.topIcon, div#topSend, div#topTool").hover( function(){$(this).children("div.topTip").show();}, function(){ if(!clicked) { $(this).children("div.topTip").hide(); $(this).children('div.topTip').hide(); } } ); //tooltip widening and dropdown menu $("div.topIconNew").click(function(){ //permanent tooltip $(this).children("div.topTip").show(); $(this).children("div.topTip").animate({width:320,marginLeft:-240},"fast"); $(this).children("div.topDrop").slideDown(240); clicked = true; }); $("div.wrapper").click(function(){ //hide dropdown (hide simultaneously) $(this).children("div.topDrop, div.topTip").hide(); }); }); 

 $('.imageClass').click(function() { var whatYoureLookingFor = $(this).next('.dropDownTooltipClass'); }); 

Вот догадка

  $('.someClass').click(function(){ $(this).children(); // to access a dom under the clicked item $(this).next(); // to access is direct next dom }); 

Таким образом, вы работаете только с нажатым элементом

Изменить: отредактировать ответ, чтобы он соответствовал разметке, которую вы опубликовали.

Ваш код не работает, потому что .topTip не является дочерним .topIconNew . Сначала вам нужно использовать технику, описанную в моем первоначальном ответе ниже – найти родителя, а затем его детей. Используйте $(this).closest(".topIcon") чтобы найти родителя. .closest() возвращает текущий элемент, если он соответствует селектору или первому предку, который соответствует селектору.

 $("div.topIconNew, div.topIcon, div#topSend, div#topTool").hover( function () { $(this).closest(".topIcon").children("div.topTip").show(); }, function () { if(!clicked) { $(this).closest(".topIcon").children("div.topTip").hide(); } } }); 

Однако вы найдете еще одну проблему. Поскольку clicked по переменной является общей, после щелчка по значку все всплывающие подсказки будут оставаться видимыми после зависания всех значков. Вам нужно clicked локально на отдельные значки. Самый простой способ добиться этого – это, вероятно, сохранение в .topIcon .data() для каждого .topIcon :

 $("div.topIconNew, div.topIcon, div#topSend, div#topTool").hover( function() { $(this).closest(".topIcon").children("div.topTip").show(); }, function() { var icon = $(this).closest(".topIcon"); if(!icon.data("clicked")) { icon.children("div.topTip").hide(); } } }); $("div.topIconNew").click(function () { //permanent tooltip var icon = $(this).parent(); icon.children("div.topTip") .show() .animate({ width: 320, marginLeft: -240 }, "fast"); icon.children("div.topDrop").slideDown(240); icon.data("clicked", true); }); 

Оригинальный ответ:

Настройте свои элементы, чтобы значки, всплывающие подсказки и выпадающие списки имели общий родительский элемент. Что-то вроде этого:

 
  • tooltip
    dropdown

Затем в обработчике .click() вашего значка найдите всплывающую подсказку и раскрывающийся список родителя значка:

 $("li > img").click(function () { $(this).parent().find("div").show(); }); 

В качестве альтернативы, сделайте это по индексу. Настройте значки в том же порядке в разметке, что и их соответствующие подсказки и выпадающие меню:

 
tooltip
tooltip
tooltip

Затем используйте .index() и .eq() чтобы найти всплывающие подсказки и выпадающие .eq() :

 $(".icons > img").click(function () { var idx = $(this).index(); $(".tooltips > div").eq(idx).show(); $(".dropdowns > div").eq(idx).show(); });