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 that you have read and understand our privacy policy and code of conduct.

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