无法在 Laravel 上的刀片文件中运行我的 jquery 代码

我试图运行一个jquery代码，显示一个放大的模型时单击。我用一个原始的html/css/js程序测试了它，它工作得很好。但是，当尝试将其放入laravel程序时，看起来我的刀片文件没有拾取jquery代码。我把js代码放在我的public/js/external.js文件中。这是我的脚本代码，我放在我的刀片代码的末尾:

<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="public/js/external.js"></script>

谁能告诉我出了什么问题?我很乐意提供更多的信息。编辑:这是我的index.blade.php

<div class="py-12">
<div class="container">
<div class="row">
<div class="col-md-12">
@if(session('success'))
<div class="alert alert-success alert-dismissible fade show" role="alert">
<strong>{{ session('success') }}</strong>
<button type="button" class="close" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
@endif                    
<div class="card">
<div class="card-header">All models</div>
<table class="table">
<thead>
<tr>
<th scope="col">SL No</th>
<th scope="col">Model Name</th>
<th scope="col">Model Image</th>
<th scope="col">Description</th>
<th scope="col">Version</th>
<th scope="col">Created At</th>
<th scope="col">Modify</th></th>
</tr>
</thead>
<tbody>
{{-- @php($i =1)   --}}
@if(count($items)>0)
@foreach($items as $item)
<tr>
<th scope="row">{{ $items->firstItem()+$loop->index}}</th>
<td>{{ $item->model_name }}</td>
<td><model-viewer class="small-image" src="{{ asset($item->model_image) }}"alt=""auto-rotate="" camera-controls="" background-color="#455A64"></model-viewer></td> {{-- The part where users can click and and an enlarged model will appear --}}

<td>{{ $item->description }}</td>
<td>{{ $item->version }}</td>
<td>
@if($item->created_at == NULL)
<span class="text-danger"> No Date Set </span>
@else
{{ CarbonCarbon::parse($item->created_at)->diffForHumans() }} {{-- Carbon needed for query builder --}}
@endif
</td> 
<td>
<a href="{{ url('model/download/'.$item->id) }}"class="btn btn-success">Download</a>
<a href="{{ url('model/view/'.$item->model_name) }}"class="btn btn-primary">View</a>
<a href="{{ url('model/edit/'.$item->id) }}"class="btn btn-secondary">Edit</a>
</td>
</tr>
@endforeach
@else
<td>No records found</td>
@endif
</tbody>
</table>
{{ $items->links() }}
</div>
</div>
</div>

<div id="show_image_popup">
<div class="close-btn-area">

</div>
<div id="image-show-area">
<model-viewer class="clickModel"  id="large-image" alt=""auto-rotate="" camera-controls="" background-color="#455A64"></model-viewer>
</div>

这里是我的external.js:

$( document ).ready(function(){

$("#close-btn").click(function(){
// remove active class from all images
$(".small-image").removeClass('active');
$("#show_image_popup").slideUp();
})
$(".small-image").click(function(){
// remove active class from all images
alert('HUH');
$(".small-image").removeClass('active');
// add active class
$(this).addClass('active');
var image_path = $(this).attr('src'); 



$("#large-image").attr('src',image_path);
})

})

当我单击任何模型时，警报功能都可以工作，但是当我单击它时应该出现弹出式模态。当我点击模型图像时会发生什么?

看看你的刀片是如何拥有@yield('content')的，你会想要在脚脚添加一个，例如@yield('scripts')-这是在你的基本刀片。

的例子:

<html>
<head>
<title>App Name - @yield('title')</title>
</head>
<body>
<div class="container">
@yield('content')
</div>
<script src="your main app script here.">
@yield('scripts')
</body>
</html>

然后在你的视图中你可以做

@section('content')
your page content.
@endsection
@section('scripts')
<script>
// your jQuery here.
</script>
@endsection

确保你的jquery链接是你包含的第一个js，排序在包含你的资产时非常重要。

进入查看源页面，检查脚本是否存在并正确链接。

主布局刀片式app.blade.php:

<html>
<head>
<title>Title</title>
</head>
<body>
<div class="container">
@yield('content')
</div>
@stack('script')
</body>

儿童叶片:

@section('content')
your page content.
@endsection
@push('script')
your both scripts
@endpush

除了@siddharth提到的，你可以通过在文档中添加警报来检查吗?准备好检查你的Jquery是否被加载。

你也可以检查JS相关的错误在控制台有更好的想法，如果你可以检查并附上控制台的屏幕截图，如果有任何错误。

相关内容

最新更新

热门标签：