javascript - if..else 在 IIFy 内部工作，但不在事件监听器内部工作

Question

此代码完全按照预期工作:

(function(){
  var $winWidth = $(window).width();
 $( "#stop" ).prepend( "<p>Actual window width: " + $winWidth + "</p>" ); 
 if ($winWidth < 700) {
   $('.cycle-slideshow').attr('data-cycle-carousel-visible', '3');
 } else if ($winWidth < 1000) {
   $('.cycle-slideshow').attr('data-cycle-carousel-visible', '6');
 } else {
   $('.cycle-slideshow').attr('data-cycle-carousel-visible', '9');
 }
}());

但是这个很高兴地按照预期动态显示宽度，但拒绝支持相同的 if ... else

$(window).on('resize',function() {
      var $winWidth = $(window).width();
      $('#stop p').remove();
      $( "#stop" ).prepend( "<p>Actual window width: " + $winWidth + "</p>" );
   if ($winWidth < 700) {
   $('.cycle-slideshow').attr('data-cycle-carousel-visible', '3');
 } else if ($winWidth < 1000) {
   $('.cycle-slideshow').attr('data-cycle-carousel-visible', '6');
 } else {
   $('.cycle-slideshow').attr('data-cycle-carousel-visible', '9');
 }
    });

请问我可以得到一些解释吗？ 笔在这里:http://codepen.io/462960/pen/yyKrWP?editors=1010 我什至尝试过这种模式但没有成功:

$(window).on('resize',function() {
      var $winWidth = $(window).width();
      var atTribute;
      $('#stop p').remove();
      $( "#stop" ).prepend( "<p>Actual window width: " + $winWidth + "</p>" );
   if ($winWidth < 700) {
  atTribute = '3';
 } else if ($winWidth < 1000) {
  atTribute = '6';
 } else {
  atTribute = '9'; 
 }
  $('.cycle-slideshow').attr('data-cycle-carousel-visible', atTribute);
    });

您能否让我放心，我在上一次中没有滥用 var 重新分配。

Answer 1

代码中的 if...else 工作正常。如果您检查轮播并观察 data-cycle-carousel-visible 属性，它会按照调整大小时的预期进行更改。

我认为 IIFE 按预期工作的原因是因为它是在页面完成加载之前执行的，这很可能是在 Cycle2 carousel 插件运行时发生的。此时，您的属性已设置为正确的幻灯片数量。

当您在调整大小时更改属性时，它只是更改 DOM 中的属性。您使用的轮播插件不会监视该属性的更改，因此幻灯片的可见数量不会更改。

我做了一些挖掘，发现其他人也在寻找此插件的类似功能，因此此链接可能会帮助您继续前进:https://github.com/malsup/cycle2/issues/68