1

Добрый день, есть проблема, нужно при расширеннии экрана <767px отменить выполнение функции, но , к сожалению без постоянной перезагрузки страницы это сделать не получается. Скажите, пожалуйста как исправить. код который использую js:

function hoverTooltip() {
    var $containerWidth = $(window).width();
    if ($containerWidth >= 767)  {
        $('.list-preview li').hover(function() {
            $(this).addClass('active').siblings('.list-preview li:first-child').removeClass('active');
        }, function() {
            $(this).removeClass('active').siblings('.first').addClass('active');
            $('.first').addClass('active');
        });  
    }
}

$(window).resize(
    function () {
   hoverTooltip();
});` 

html

<ul class="list-inline list-preview clearfix">
    <li class="active first">
        <span>
           <img src="img/icon/icon_svg/icon-plans.svg" alt="Несколько вариантов планировки" class="caption__img">
           <span class="caption__sticker">Несколько вариантов 
            планировки</span>
         </span>
    </li>
    <li>
      <span>
        <img src="img/icon/icon_svg/icon-zones.svg" alt="Продуманное 
         зонирование" class="caption__img">
        <span class="caption__sticker">Продуманное зонирование</span>
      </span>
    </li>

   </ul>
2
  • т.е вы хотите отменить исполнение HOVER ?
    – Arsen
    5 апр 2017 в 10:02
  • да, что бы при расширении меньше 767рх ничего не происходило
    – Shutenchik
    5 апр 2017 в 10:03

3 ответа 3

1

$('.list-preview li').on('mouseenter mouseleave', onHover);

function onHover( e )
{
  var self = $(this),
      mobileWidth = $(window).width() < 768;

  if(mobileWidth) return null;
  
  if (e.type == "mouseenter") {
    onMouseenter(self);
  } else {
    onMouseleave(self);
  }
}

function onMouseenter( elem )
{
  elem.addClass('active').siblings('.list-preview li:first-child').removeClass('active');
}

function onMouseleave( elem )
{
  elem.removeClass('active').siblings('.first').addClass('active');
  $('.first').addClass('active');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-inline list-preview clearfix">
    <li class="active first">
        <span>
           <img src="img/icon/icon_svg/icon-plans.svg" alt="Несколько вариантов планировки" class="caption__img">
           <span class="caption__sticker">Несколько вариантов 
            планировки</span>
         </span>
    </li>
    <li>
      <span>
        <img src="img/icon/icon_svg/icon-zones.svg" alt="Продуманное 
         зонирование" class="caption__img">
        <span class="caption__sticker">Продуманное зонирование</span>
      </span>
    </li>

   </ul>

1
  • Но учитывая текущую простоту блока, я бы наверное лучше сделал на css целиком эти хаверы, типа .list-preview li:first-child { /* стили хавера / } .list-preview:hover li:first-child { / убираем стили хавера / } .list-preview li:hover { / стили хавера */ } (в последнем возможно придется через !important, не могу сейчас сообразить перебьет ли этот стиль предыдущее условие) 5 апр 2017 в 10:42
1

Вся проблема в том что ты уже инициализировал HOVER и поэтому оно всегда работает после resize, надо просто использовать UNBIND jsfiddle.net

  jQuery(document).ready(function(){

var $containerWidth = $(window).width();

console.log($containerWidth);
if($containerWidth >= 767){
 hoverTooltip();
}

$(window).on('resize',function () {
var $containerWidth = $(window).width();
   if($containerWidth >= 767){

 hoverTooltip();
} else{
console.log('unbind');
$('.list-preview li').unbind('mouseenter mouseleave')
}
});


});



function hoverTooltip() {

    $('.list-preview li').hover(function() {
        $(this).addClass('active').siblings('.list-preview li:first-child').removeClass('active');
console.log('hover');
    }, function() {
        $(this).removeClass('active').siblings('.first').addClass('active');
        $('.first').addClass('active');
      
    });  
   
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="list-inline list-preview clearfix">
    <li class="active first">
        <span>
           <img src="img/icon/icon_svg/icon-plans.svg" alt="Несколько вариантов планировки" class="caption__img">
           <span class="caption__sticker">Несколько вариантов 
            планировки</span>
         </span>
    </li>
    <li>
      <span>
        <img src="img/icon/icon_svg/icon-zones.svg" alt="Продуманное 
         зонирование" class="caption__img">
        <span class="caption__sticker">Продуманное зонирование</span>
      </span>
    </li>

   </ul>

6
  • Верный подход, но на 768+ при каждом ресайзе будет вешаться событие. 5 апр 2017 в 10:50
  • @MedvedevDev, и?
    – Arsen
    5 апр 2017 в 10:53
  • при каждом хавере у тебя будет срабатывать хавер миллион раз. При веревешивании события надо сначала анбиндить предыдущие, попробуй задать айфрейму 1000px ширины и пару раз это значение уменьшить в пределах 768+, посмотри что в консоль сыпется. 5 апр 2017 в 10:55
  • проблем с 'хаверем' нет, т.е данная логика resize будет работать один или два раза, если конечно кто то от безделия не будет сидеть и милион раз ресайзить сайт
    – Arsen
    5 апр 2017 в 11:03
  • Если появляется задача обрабатывать ширину экрана налету, а не при загрузке страницы, значит велика вероятность, что тот кому это требуется как раз собирается сидеть и туда сюда экран гонять. Это конечно дичь, но зачем надеяться на адекватность конечно пользователя? Лучше учесть все более менее реальные сценарии использования, но это конечно на вкус и цвет. Тут это не критично, в другой раз с каким-нибудь каунтером внутри это может стать критичным, лучше приучаться сразу. 5 апр 2017 в 11:06
0

Ты близко к решению задачи Вот мой пример

    $(window).resize(function (){
    if(window.innerWidth < "767"){
      jQuery('div').css('display','none');
  } else{
   jQuery('div').css('display','block');
  }  
});

jsfiddle пример

1
  • Сергей, твой пример не будет работать для действия HOVER
    – Arsen
    5 апр 2017 в 10:13

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.