За последние 24 часа нас посетили 17614 программистов и 1671 робот. Сейчас ищут 1508 программистов ...

Как применить show() для дочернего тега?

Тема в разделе "JavaScript и AJAX", создана пользователем Сереганек, 24 сен 2017.

  1. Сереганек

    Сереганек Активный пользователь

    С нами с:
    18 янв 2017
    Сообщения:
    333
    Симпатии:
    27
    Есть такой фрагмент кода:
    HTML:
    1. <a href="#comment-10">
    2.     <i class="fa fa-reply fa-rotate-180" aria-hidden="true"></i>
    3.     <span class="parent" style="display: inline;">to Parent ...</span>
    4.                                             </a>
    Таких фрагментов у меня на странице много - это комменты.

    При ховере на иконку .fa-reply мне нужно отобразить текст внутри span.

    Написал такой скрипт:
    Код (Javascript):
    1.         <script>
    2.             $(".fa-reply").hover(function(){
    3.                 $(".parent").show();
    4.             });
    5.         </script>
    Но этим скриптом отображаются тексты span на всех комментах сразу, а мне нужно показать только текущий span.
    Я могу раздать всем тегам span разные id, но как тогда правильно джаваскрипту передать id, которого я заранее не знаю? Или может можно как-то сказать скрипту отображать дочерний элемент относительно того, на котором был ховер?
     
  2. Deonis

    Deonis Старожил

    С нами с:
    15 фев 2013
    Сообщения:
    1.521
    Симпатии:
    504
    Код (Javascript):
    1. $('.fa-reply').on('mouseenter', function(){
    2.     $(this).siblings('.parent').show();
    3. });
    4. // или
    5. $('.fa-reply').on('mouseenter', function(){
    6.     $(this).next('.parent').show();
    7. });
    --- Добавлено ---
    Кстати, если нужно прятать элемент после при отведении курсора, то можно и без JS обойтись.
    Код (CSS):
    1. .parent {
    2.     display: none;
    3. }
    4. .fa-reply:hover + .parent {
    5.     display: inline;
    6. }
     
    Сереганек нравится это.