jQuery mousenter не находит и не применяет addClass к правильному атрибуту данных div - PullRequest
Новая
       9

jQuery mousenter не находит и не применяет addClass к правильному атрибуту данных div

0 голосов
/ 26 апреля 2018

У меня есть такая структура HTML 

<div class="outer-wrapper">
     <ul id="primary-nav">
           <li data-rel="mB">
                  <a href="#">
                       <h1 class="title">Title</h1>
                 </a>
             </li>
            <li data-rel="mE">
                   <a href="#">
                       <h1 class="title">Title</h1>
                   </a>
             </li>
             <li data-rel="yB">
                 <a href="#">
                    <h1 class="title">Title</h1>
                 </a>
            </li>
    </ul>
    <div id="feature-images">
          <div class="image-field">
               <ul>
                   <li data-motion="mB">
                        <div class="img" style="background-image:url('/images/full1.jpg')"></div>
                    </li>
                    <li data-motion="mE">
                        <div class="img" style="background-image:url('/images/full2.jpg')"></div>
                     </li>
                     <li data-motion="yB">
                          <div class="img" style="background-image:url('/images/full3.jpg')"></div>
                      </li>
                 </ul>
             </div>
      </div>
</div>

Когда primary-nav li a наведен, jQuery должен сдвинуть изображение с соответствующим атрибутом data-motion наведенного #primary-nav li. 

function mpSlide() {

    $("#primary-nav li a").on("mouseenter", function () {
        var $itemAtt = $(this).data("rel");
        $("#feature-images .image-field ul li[data-motion='" + $itemAtt + "']").addClass("is-open");
    }).on('mouseleave', function () {
        $("#feature-images .image-field ul li").removeClass("is-open");
    });

}

Моя консоль не выдает ошибок или предупреждений. Я не уверен, что я здесь сделал.

1 Ответ

0 голосов
/ 26 апреля 2018

Вы можете использовать mouseover и mouseout для этого, так же как и вам нужно удалить a из вашего выбора, потому что у него нет атрибута data-rel. 

$("#primary-nav li").mouseover(function() {  
  var $itemAtt = $(this).data("rel");
  $("#feature-images .image-field ul li[data-motion='" + $itemAtt + "']").addClass("is-open");
}).mouseout(function() {
  $("#feature-images .image-field ul li").removeClass("is-open");
});
.is-open{
background-color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer-wrapper">
  <ul id="primary-nav">
    <li data-rel="mB">
      <a href="#">
        <h1 class="title">Title</h1>
      </a>
    </li>
    <li data-rel="mE">
      <a href="#">
        <h1 class="title">Title</h1>
      </a>
    </li>
    <li data-rel="yB">
      <a href="#">
        <h1 class="title">Title</h1>
      </a>
    </li>
  </ul>
  <div id="feature-images">
    <div class="image-field">
      <ul>
        <li data-motion="mB">
          <div class="img" style="background-image:url('/images/full1.jpg')"></div>
        </li>
        <li data-motion="mE">
          <div class="img" style="background-image:url('/images/full2.jpg')"></div>
        </li>
        <li data-motion="yB">
          <div class="img" style="background-image:url('/images/full3.jpg')"></div>
        </li>
      </ul>
    </div>
  </div>
</div>
...