时间戳

首页 > 解决方案 > Laravel - 除非浏览器刷新或直接访问页面，否则脚本将无法运行

jquery - Laravel - 除非浏览器刷新或直接访问页面，否则脚本将无法运行

问题描述

该脚本仅在刷新后才会在我的页面上运行。奇怪的是，如果我查看控制台没有错误，而且看起来它实际上正在运行。下面是我的 app.blade.php 文件和我的视图文件。如果我刷新页面，它运行得很好，但是如果我从另一个页面访问它就不会正确加载。以下是我的代码的简化版本。第一个是 app.blade.php，第二个是视图文件。如果屏幕被引用或页面被直接访问，代码就可以正常工作。

app.blade.php

<!DOCTYPE html>
<html @php language_attributes() @endphp class="show-transition-cover">

@include('partials.head')

<body @php body_class() @endphp>

    @php do_action('get_header') @endphp
    @include('partials.header')

    <div id="wrapper" class="page-{!! $get_slugs['templateSlug'] !!} page-type-{!! $get_slugs['postType'] !!}" role="document">
      <main id="content" role="document" router-wrapper>

        @yield('content')
      </main>
      @php do_action('get_footer') @endphp
    </div>

    @include('partials.footer')

    <div class="transition-cover">
      <div class="transition-cover-content">
        <div class="brand-container" >
          <div class="site-header__left-container"></div>
          <div class="site-header__brand-container">
            <div class="brand hidden" >
              <div class="svg-container" >
                @php include App\svg_path('logo.svg') @endphp
              </div>
            </div>
          </div>
          <div class="site-header__right-container"></div>
        </div>
        <div class="transition-cover-phrase">
          <div class="container w-75">
            <div class="content">
              <div class="h1 transition-cover-title">
                <div class="text"></div>

              </div>
            </div> 
          </div>
        </div>
      </div>
    </div>

    @php wp_footer() @endphp


          @yield('scripts')

</body>
</html>

这是我的视图文件

@extends('layouts.app')

@section('content')


<div router-view="floorPlansRouter" class="page-{!! $get_slugs['templateSlug'] !!} page-type-{!! $get_slugs['postType'] !!}" data-cover-phrase="FLOOR PLANS">

<section class="newfloorplans">
    <div class="container">
        <div class="flooplanList filter-button-group">
            <ul>
            <li><span class="is-checked" data-filter="all">All Plans</span> /</li>
            <li><span data-filter="studio">Studio</span> /</li>
            <li><span data-filter="onebed"><sup class="number">1</sup> Bedroom</span> /</li>
            <li><span data-filter="onebedden"><sup class="number">1</sup> Bedroom + Den</span> /</li>
            <li><span data-filter="twobed"><sup class="number">2</sup> Bedroom</span> /</li>
            <li><span data-filter="townhouse">Townhouse</span> /</li>
            <li><span class="sitelink">Sitemap</span></li>
            </ul>
        </div>
        <div class="hr container "></div>
        <div class="container">
        <div class="grid">

            @include('floorplans.studio')
            @include('floorplans.onebed')
            @include('floorplans.onebedden')
            @include('floorplans.twobed')
            @include('floorplans.townhome')
        </div>
        </div>
        <!-- IFRAME -->
        <div router-view="floorPlansRouter" class="page-{!! $get_slugs['templateSlug'] !!} page-type-{!! $get_slugs['postType'] !!}" data-cover-phrase="FLOOR PLANS">
          <a id="sitemap"></a>
            <section class="page-section type-sightmap-embed">
                <iframe frameborder="0" scrolling="no" class="embed-container" src="https://sightmap.com/embed/{{ get_field('embed_id') }}"></iframe>
            </section>

        </div>
        <!-- IFRAME -->
    </div>
</section>

    @include('partials.section_instagram_feed')
    @include('partials.section_contact_cta')

</div>

@endsection
@section('scripts')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function($) {
alert( "welcome now" );
        $('.flooplanList ul li span').not('.sitelink').click(function(){
                    $('.flooplanList ul li span').each(function(index, el) {
                        $(this).removeClass('is-checked');
                    });
            $(this).toggleClass("is-checked");  // toggle active on current

            if ( $(this).data("filter") == "all" )  {
                $(".element-item").each(function() {
                    $(this).fadeIn(200);
                });
            }
            else {
                filter();  // filter elements
            }


        });


        var filter = function() {
          // array of classes that items need to have
          var classes = $(".flooplanList ul li span.is-checked")
              .map(function() {
                return $(this).data("filter");
              })
              .toArray();

              console.log(classes)

          $(".element-item").each(function() {
            var $this = $(this);
            // it should show if it has all classes as the settings say
            var show = classes.every(function(aClass) {
              return $this.hasClass(aClass);  // class is a reserved word
            });

            console.log(show)
            // toggle appropriately
            if(show) {
              $this.fadeIn(200);
            }
            else {
              $this.fadeOut(200);
            }
          });
        };

        // INLINED
        // MORE INFO
        $('.flplink span.button').click(function(event) {
            event.preventDefault();

            $(".element-item").each(function() {
                    var activeones = $(this).find('.moreinfo.is-active');
                    activeones.removeClass('is-active');
            });

            var moreinfo = $(this).parent().parent().parent().find('.moreinfo');
            moreinfo.insertAfter($(this).parent().parent().parent())
            moreinfo.toggleClass('is-active');
            $(this).parent().parent().parent().addClass('is-active');



            setTimeout(function() {
                 $('html,body').on('scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove', function() {
                   $('html,body').stop();
                 });
                 $('html,body').animate({
                   scrollTop: moreinfo.offset().top - 100
                 }, 500);
               }, 500);



        });

        $('.moreinfo .close').click(function(event) {
                event.preventDefault();
                var moreinfo = $(this).parent().parent();
                moreinfo.removeClass('is-active');
                var iback = moreinfo.parent().find('.element-item.is-active');
                moreinfo.appendTo(iback);





                setTimeout(function() {
                     $('html,body').on('scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove', function() {
                       $('html,body').stop();
                     });
                     $('html,body').animate({
                       scrollTop: iback.offset().top - 200
                     }, 500);

                     $(".element-item").each(function() {
                            $(this).removeClass('is-active');
                     });

                   }, 500);


        });


        $('.flooplanList ul li span.sitelink').click(function(event) {
            event.preventDefault();
            $('html,body').animate({
              scrollTop: $('#sitemap').offset().top - 200
            }, 500);
        });


    });
</script>@endsection

标签： jquerylaravel

解决方案

推荐阅读