Переключить определенный элемент нескольких li с тем же классом - PullRequest
Новая
       33

Переключить определенный элемент нескольких li с тем же классом

0 голосов
/ 29 марта 2019

У меня есть код ниже 

  <html>
  <body>
 <ul class="featured-categories__list row" id="featured-categories">

        <li class="featured-categories__list__item col-sm-4">               

            <a class="product-box__box-link product-box__box-link--light product-box__box-link--content-bottom" id="secCatLnk1" href="">
                <div class="featured-categories__list__item__text" style="display: block;">
                <h2 class="featured-categories__list__item__text__heading" id="secCatTxt1">DECORATIONS</h2>
                <div class="featured-categories__list__item__focus-text__call-to-action" id="secSubCatTxt1">Shop now</div>
                </div>
            </a>
            <div class="featured-categories__list__item__focus-text" style="display: none;">
                <h4 class="heading-level-five featured-categories__list__item__focus-text__heading" id="secDescText1">Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
                <p class="featured-categories__list__item__focus-text__call-to-action" id="secShopText1">Shop now</p>
            </div>
        </li>
        <li class="featured-categories__list__item col-sm-4">


            <a class="product-box__box-link product-box__box-link--light product-box__box-link--content-bottom" id="secCatLnk2" href="">
                <div class="featured-categories__list__item__text" style="display: block;">
                    <h2 class="featured-categories__list__item__text__heading" id="secCatTxt2">CHRISTMAS CARDS</h2>
                    <div class="featured-categories__list__item__focus-text__call-to-action" id="secSubCatTxt2">Shop now</div>
                </div>
            </a>
            <div class="featured-categories__list__item__focus-text" style="display: none;">
                <h4 class="heading-level-five featured-categories__list__item__focus-text__heading" id="secDescText2">Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
                <p class="featured-categories__list__item__focus-text__call-to-action" id="secShopText2">Shop now</p>
            </div>
        </li>
        <li class="featured-categories__list__item col-sm-4">           


            <a class="product-box__box-link product-box__box-link--light product-box__box-link--content-bottom" id="secCatLnk3" href="">
              <div class="featured-categories__list__item__text" style="display: block;">
                <h2 class="featured-categories__list__item__text__heading" id="secCatTxt3">GIFTS FOR HIM</h2>
                <div class="featured-categories__list__item__focus-text__call-to-action" id="secSubCatTxt3">Shop now</div>
              </div>
            </a>
            <div class="featured-categories__list__item__focus-text" style="display: none;">
                <h4 class="heading-level-five featured-categories__list__item__focus-text__heading" id="secDescText3">Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
                <p class="featured-categories__list__item__focus-text__call-to-action" id="secShopText3">Shop now</p>
            </div>  
        </li>              

    </ul>
   <script>  
        $(document).ready(function($){  
      $('.featured-categories__list__item').mouseover(function() {

            $('.featured-categories__list__item__text').hide();
            $('.featured-categories__list__item__focus-text').show();
        }).mouseout(function() {
            $('.featured-categories__list__item__text').show();
            $('.featured-categories__list__item__focus-text').hide();
        });
   });
   </script>

Я пытаюсь показать класс " Featured-Categories__list__item__focus-text " при наведении курсора мыши на "featured-Categories__list__item".

Приведенный выше код работает правильно, но он не работает для конкретного элемента поиска.

Вместо этого он показывает все другие элементы, имеющие тот же класс.

Мне нужно показать конкретный элемент накрытия множества li.

Как этого избежать.Пожалуйста, кто-нибудь заглянуть в это и поделиться своими идеями.Спасибо

Ответы [ 2 ]

2 голосов
/ 29 марта 2019

Вы можете использовать $(this) и .children(), чтобы указать, на какой из element вы нацелены.

Пример: $(this).children('.featured-categories__list__item__text').hide();

См. Фрагмент: 

$(document).ready(function($) {
  $('.featured-categories__list__item').mouseover(function() {
    $(this).children('.featured-categories__list__item__text').hide();
    //$('.featured-categories__list__item__text').hide();
    // $('.featured-categories__list__item__focus-text').show();
    $(this).children('.featured-categories__list__item__focus-text').show();
  }).mouseout(function() {
    $(this).children('.featured-categories__list__item__text').show();
    //$('.featured-categories__list__item__text').show();
    // $('.featured-categories__list__item__focus-text').hide();
    $(this).children('.featured-categories__list__item__focus-text').hide();
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="featured-categories__list row" id="featured-categories">

        <li class="featured-categories__list__item col-sm-4">               

            <a class="product-box__box-link product-box__box-link--light product-box__box-link--content-bottom" id="secCatLnk1" href="">
                <div class="featured-categories__list__item__text" style="display: block;">
                <h2 class="featured-categories__list__item__text__heading" id="secCatTxt1">DECORATIONS</h2>
                <div class="featured-categories__list__item__focus-text__call-to-action" id="secSubCatTxt1">Shop now</div>
                </div>
            </a>
            <div class="featured-categories__list__item__focus-text" style="display: none;">
                <h4 class="heading-level-five featured-categories__list__item__focus-text__heading" id="secDescText1">Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
                <p class="featured-categories__list__item__focus-text__call-to-action" id="secShopText1">Shop now</p>
            </div>
        </li>
        <li class="featured-categories__list__item col-sm-4">


            <a class="product-box__box-link product-box__box-link--light product-box__box-link--content-bottom" id="secCatLnk2" href="">
                <div class="featured-categories__list__item__text" style="display: block;">
                    <h2 class="featured-categories__list__item__text__heading" id="secCatTxt2">CHRISTMAS CARDS</h2>
                    <div class="featured-categories__list__item__focus-text__call-to-action" id="secSubCatTxt2">Shop now</div>
                </div>
            </a>
            <div class="featured-categories__list__item__focus-text" style="display: none;">
                <h4 class="heading-level-five featured-categories__list__item__focus-text__heading" id="secDescText2">Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
                <p class="featured-categories__list__item__focus-text__call-to-action" id="secShopText2">Shop now</p>
            </div>
        </li>
        <li class="featured-categories__list__item col-sm-4">           


            <a class="product-box__box-link product-box__box-link--light product-box__box-link--content-bottom" id="secCatLnk3" href="">
              <div class="featured-categories__list__item__text" style="display: block;">
                <h2 class="featured-categories__list__item__text__heading" id="secCatTxt3">GIFTS FOR HIM</h2>
                <div class="featured-categories__list__item__focus-text__call-to-action" id="secSubCatTxt3">Shop now</div>
              </div>
            </a>
            <div class="featured-categories__list__item__focus-text" style="display: none;">
                <h4 class="heading-level-five featured-categories__list__item__focus-text__heading" id="secDescText3">Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
                <p class="featured-categories__list__item__focus-text__call-to-action" id="secShopText3">Shop now</p>
            </div>  
        </li>              

    </ul>
0 голосов
/ 29 марта 2019 
   <script>  
        $(document).ready(function($){  
      $('.featured-categories__list__item').mouseover(function() {
            $(this).find('a div .featured-categories__list__item__text').hide();

            $(this).find('.featured-categories__list__item__focus-text').show();
        }).mouseout(function() {
            $(this).find('a div .featured-categories__list__item__text').show();
            $(this).find('.featured-categories__list__item__focus-text').hide();

        });
   });
   </script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...