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插件时。此时，您的属性已设置为正确的幻灯片数。

在resize上更改属性时，它只会更改DOM中的属性。您正在使用的轮播插件不会监视该属性的更改，因此可见的幻灯片数量不会更改。

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

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

1 个答案: