Javascript不适用于IE浏览器和ff

时间:2018-10-31 17:26:56

标签: javascript php html laravel

我有一个javascript,它将新闻和事件的高度重定向到最高度,以便它们都具有相同的高度大小,以某种方式在mozilla和ie中不起作用。

但是对于chrome来说,它完全可以使它们都具有相同的大小。其他浏览器均未在控制台中显示任何错误,因此我很难调试它

这是我索引页面的唯一部分,包括div im使用和js中的脚本,im使用laravel作为框架btw:

<div class="col-md-8 news homepage s2">
     <div class="swiper-container">
          <div class="swiper-wrapper">
               @foreach($events as $n)
                   <div class="swiper-slide remove_p">
                        <h4>{!! nl2br($n['titulo_'.$lang]) !!}</h4>
                        {!! nl2br($n['desc_'.$lang]) !!}
                        <a href="{{ ROUTE('page', ['cat' => 'eventos', 'id' => $n->id]) }}" class="link more_btn">{{ $geral['SAIBA_MAIS']->value }}</a>
                   </div>
               @endforeach
          </div>              
     </div>
     <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
     </div>
</div>
</div>

@section('scripts')
@parent

<script type="text/javascript">
var mySwiper = new Swiper('.homepage.s1 .swiper-container', {
    speed: 400,
    spaceBetween: 30,
    slidesPerView: 3,
    navigation: {
      nextEl: '.homepage.s1 .swiper-button-next',
      prevEl: '.homepage.s1 .swiper-button-prev',
    },
    breakpoints: {
      480: {
        slidesPerView: 1,
        spaceBetween: 100
      }
    }
});

var mySwiper = new Swiper('.homepage.s2 .swiper-container', {
    speed: 400,
    spaceBetween: 30,
    slidesPerView: 3,
    navigation: {
      nextEl: '.homepage.s2 .swiper-button-next',
      prevEl: '.homepage.s2 .swiper-button-prev',
    },
    breakpoints: {
      480: {
        slidesPerView: 1,
        spaceBetween: 100
      }
    }
});
</script>
<script>
  setTimeout(resizeSwiper, 500)
  setTimeout(resizeSwiper, 1000)
  setTimeout(resizeSwiper, 2000)
  setTimeout(resizeSwiper, 3000)

  function resizeSwiper() {
    $('.swiper-container').each(function() {
      var $this = $(this)
      var height = 0
      $this.find('.swiper-slide').each(function() {
        var s_title_h = $(this).find('h4').height()
        var s_p_h = $(this).find('p').eq(0).height()

        if(height < (s_title_h + s_p_h)) {
          height = (s_title_h + s_p_h)
        }
      })

      $this.css({
        'height': height + 50
      })

      $(this).parent().parent().find('.col-md-4.line_block').css({
        'height': height + 50
      })

      $(this).parent().parent().find('.col-md-4.img_eventos').css({
        'height': height + 50
      })

    })

    /*$('.img_eventos').css({
      'height': $('.swiper-container').eq(1).height() + 0
    })*/
  }
</script>
@endsection

滑块也一样,在两个浏览器中均不显示

0 个答案:

没有答案