Мне нужно показывать изображения и описания тела при наведении заголовка, когда размер экрана больше 1024, и ничего не показывать, если он меньше. Согласно моему коду, все отлично работает при загрузке, но когда я изменяю размер экрана от большого к маленькому, изображения и описания все еще видны. Я пытался написать заявление else, но это не помогло.

$(document).ready(function(){

var $window = $(window);
  function checkWidth() {
    var windowsize = $window.width();
    if (windowsize >= 1024) {

    $('#business').hover(function() {
    $('#business_image').fadeIn('500');
    $('#business_description').fadeIn('500');
 },function() {
    $('#business_image').fadeOut('500');
    $('#business_description').fadeOut('500');
 });
 $('#sport').hover(function() {
    $('#sport_image').fadeIn('500');
    $('#sport_description').fadeIn('500');
  },function() {
    $('#sport_image').fadeOut('500');
    $('#sport_description').fadeOut('500');
 });
 } else {
    $('#business_image').hide();
    $('#business_description').hide();
    $('#sport_image').hide();
    $('#sport_description').hide();     
}
}
  checkWidth();
  $(window).resize(checkWidth);
});

Буду признателен за любую помощь, спасибо!

1
Irina Gluchova 27 Май 2017 в 20:47

2 ответа

Лучший ответ

Во-первых, несколько улучшений вашего кода: если размер окна просто изменился выше 1024 (например: 1300 пикселей изменилось на 1250 пикселей) или ниже 1024 (600 пикселей изменилось на 700 пикселей), вам не нужно ничего делать, это только точка, в которой вы пересекаете 1024 пикселей. вам нужно вызвать метод.

При init, lastWinWidth = 0, поэтому curWinWidth >= 1024 && lastWinWidth == 0 будет истинным, если на странице загрузится ширина вашего окна более 1024.

Так что это сделает свое дело:

if ((curWinWidth >= 1024 && lastWinWidth < 1024) ||
      (curWinWidth >= 1024 && lastWinWidth == 0)) {
} else if ((curWinWidth < 1024 && lastWinWidth >= 1024) ||
      (curWinWidth < 1024 && lastWinWidth == 0)) {
}
lastWinWidth = curWinWidth;

Также jQuery позволил вам сделать multiple-selector, чтобы вы могли объединить свой код в одну строку:

$('#business_image, #business_description').fadeIn('500');

Добавьте $('#sport, #business').off(); в оператор else, поэтому удалите события наведения как для #sport, так и #business.

jQuery

.off ( )

Описание: Удалить обработчик событий.

REF: http://api.jquery.com/off/

Как говорится в комментариях, попробуйте очистить свой код. Мое решение поможет вам удалить события только при ширине окна <1024.

$(document).ready(function() {
  var lastWinWidth = 0;

  $(window).resize(resizeHandler);

  function resizeHandler() {
    var curWinWidth = $(window).width();

    if ((curWinWidth >= 1024 && lastWinWidth < 1024) ||
      (curWinWidth >= 1024 && lastWinWidth == 0)) {
      console.log('Window Width >= 1024 now');
      $('#business').hover(function() {
        $('#business_image, #business_description').fadeIn('500');
      }, function() {
        $('#business_image, #business_description').fadeOut('500');
      });
      $('#sport').hover(function() {
        $('#sport_image, #sport_description').fadeIn('500');
      }, function() {
        $('#sport_image, #sport_description').fadeOut('500');
      });
    } else if ((curWinWidth < 1024 && lastWinWidth >= 1024) ||
      (curWinWidth < 1024 && lastWinWidth == 0)) {
      console.log('Window width < 1024 now');
      $('#sport, #business').off();
      $('#business_image, #business_description, #sport_image, #sport_description').hide();
    }
    lastWinWidth = curWinWidth;
  }
  //init
  $('#business_image, #business_description, #sport_image, #sport_description').hide();
  resizeHandler();
});
#business, #sport {
  display: inline-block;
  background: aqua;
  margin: 10px;
  width: 150px;
  height: 100px;
  float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<br><br><br>
<div id="business">business
  <div id="business_image">business_image</div>
  <div id="business_description">business_description</div>
</div>

<div id="sport">sport
  <div id="sport_image">sport_image</div>
  <div id="sport_description">sport_description</div>
</div>
1
Community 20 Июн 2020 в 09:12

Чего вы хотите добиться, так это добавить функцию для изменения размера события. Вызов функции внутри функции может оказать негативное влияние на взаимодействие с пользователем.

Если вы создаете функцию снаружи, а затем просто присоединяете функцию к событию изменения размера в окне, она выполнит свою работу.

Образец кода:

function checkWidth() {
    console.log("resizing logic");
}

$(window).on("resize", checkWidth);
0
Oriles Elkar 27 Май 2017 в 18:26