该脚本仅在刷新后才能在我的页面上运行。奇怪的是，如果我在控制台中查看，没有任何错误，并且看起来它实际上正在运行。以下是我的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