jquery - 如何修复我的（导航）按钮的响应性？
问题描述
我正在做一个迷你项目，以通过以下链接中所示的教程更好地了解引导、过滤等的工作原理：
youtube：[在此处输入链接描述][1]
[1]：https
://www.youtube.com/watch?v=
_RQAoff0jx8 教程源代码：[在此处输入链接描述][2]
但是，地雷并没有按照教程显示的方式出现-当我尝试单击顶部的按钮（用于过滤图像）时，它不起作用
我已经摆弄了试图修复它的代码，但我运气不佳......如果有人能指出我的错误并可能用外行的术语解释它，我将不胜感激：）
下面是我的代码：
HTML
<!--Bootstrap-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<!--Fontawesome-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/fontawesome.min.css" integrity="sha384-wESLQ85D6gbsF459vf1CiZ2+rr+CsxRY0RpiF1tLlQpDnAgg6rwdsUF1+Ics2bni" crossorigin="anonymous">
<body>
<section class="section-spacing bottom-none inverse-bg">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="section-title text-center">
<h2><span>Gallery</span></h2>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<ul id="filter-list">
<li class="filter active" data-filter="all">all</li>
<li class="filter" data-filter="1">sedan</li>
<li class="filter" data-filter="2">hatchback</li>
<li class="filter" data-filter="3">coupe</li>
<li class="filter" data-filter="4">station wagon</li>
<li class="filter" data-filter="5">sports car</li>
<!--info on DATA-FILTER: https://www.sitepoint.com/building-a-filtering-component-with-css-animations-jquery/ -->
<!-- DATA is basically a custom variable-->
</ul>
</div>
</div>
</div>
<div class="gallery-outer">
<ul class="gallery-items">
<!--FIRST--->
<li class="filtr-item item-1" data-category="1">
<div class="gallery-inner">
<img src="https://carsguide-res.cloudinary.com/image/upload/f_auto,fl_lossy,q_auto,t_cg_hero_large/v1/editorial/story/hero_image/2021-Hyundai-i30-sedan-red-1001x565-1.jpg" alt="Picture of a sedan">
<div class="gallery-overlay"><a href="https://carsguide-res.cloudinary.com/image/upload/f_auto,fl_lossy,q_auto,t_cg_hero_large/v1/editorial/story/hero_image/2021-Hyundai-i30-sedan-red-1001x565-1.jpg" class="venobox vbox-item" data-gallery="gallery"><i class="fas fa-image"></i></a></div>
</div>
</li>
<!--Second-->
<li class="filtr-item item-2" data-category="2">
<div class="gallery-inner">
<img src="https://www.gannett-cdn.com/-mm-/38b2e6935d2caa4e96e963348fcbb385c228e98b/c=6-0-2994-1688/local/-/media/2017/05/28/USATODAY/USATODAY/636315278501076031-ChevroletCruzeHatch17.jpg?width=2988&height=1688&fit=crop&format=pjpg&auto=webp" alt="Picture of a hatchback">
<div class="gallery-overlay"><a href="https://www.gannett-cdn.com/-mm-/38b2e6935d2caa4e96e963348fcbb385c228e98b/c=6-0-2994-1688/local/-/media/2017/05/28/USATODAY/USATODAY/636315278501076031-ChevroletCruzeHatch17.jpg?width=2988&height=1688&fit=crop&format=pjpg&auto=webp" target="_blank" data-gallery="gallery"><i class="fas fa-image"></i></a></div>
</div>
</li>
<!--Third-->
<li class="filtr-item item-3" data-category="3">
<div class="gallery-inner">
<img src="https://s.aolcdn.com/commerce/autodata/images/USC80BMC751A021001.jpg" alt="Picture of a coupe">
<div class="gallery-overlay"><a href="https://s.aolcdn.com/commerce/autodata/images/USC80BMC751A021001.jpg" class="venobox vbox-item" target="_blank" data-gallery="gallery"><i class="fas fa-image"></i></a></div>
</div>
</li>
<!--Fourth-->
<li class="filtr-item item-4" data-category="4">
<div class="gallery-inner">
<img src="https://s.abcnews.com/images/Business/ford-country-squire-file-gty-jef-210120_1611177823706_hpMain_16x9_992.jpg" alt="Picture of a station wagon">
<div class="gallery-overlay"><a href="https://s.abcnews.com/images/Business/ford-country-squire-file-gty-jef-210120_1611177823706_hpMain_16x9_992.jpg" class="venobox vbox-item" target="_blank" data-gallery="gallery"><i class="fas fa-image"></i></a></div>
</div>
</li>
<!--Fifth-->
<li class="filtr-item item-5" data-category="5">
<div class="gallery-inner">
<img src="https://www.aitrends.com/wp-content/uploads/2019/09/9-13SportsCar-2.jpg" alt="Picture of a sports car">
<div class="gallery-overlay"><a href="https://www.aitrends.com/wp-content/uploads/2019/09/9-13SportsCar-2.jpg" target="_blank" data-gallery="gallery"><i class="fas fa-image"></i></a></div>
</div>
</li>
<!--Sixth-->
<li class="filtr-item item-6" data-category="3">
<div class="gallery-inner">
<img src="https://www.autoguide.com/blog/wp-content/uploads//2018/11/top-10-bmw-accessories.jpg" alt="image of a 2nd coupe">
<div class="gallery-overlay"><a href="https://www.autoguide.com/blog/wp-content/uploads//2018/11/top-10-bmw-accessories.jpg" class="venobox vbox-item" target="_blank" data-gallery="gallery"><i class="fas fa-image"></i></a></div>
</div>
</li>
<!--Seventh-->
<li class="filtr-item item-7" data-category="1">
<div class="gallery-inner">
<img src="https://www.autoguide.com/blog/wp-content/uploads//2021/02/2021-Mazda3-Turbo-100A-Review-Featured-679x416.jpg" alt="Picture of a 2nd sedan">
<div class="gallery-overlay"><a href="https://www.autoguide.com/blog/wp-content/uploads//2021/02/2021-Mazda3-Turbo-100A-Review-Featured-679x416.jpg" target="_blank" data-gallery="gallery"><i class="fas fa-image"></i></a></div>
</div>
</li>
<!--Eight-->
<li class="filtr-item item-8" data-category="5">
<div class="gallery-inner">
<img src="https://oards.com/wp-content/uploads/2018/08/5-Types-of-Sports-Cars.jpg" alt="Picture of a 2nd sports car">
<div class="gallery-overlay"><a href="https://oards.com/wp-content/uploads/2018/08/5-Types-of-Sports-Cars.jpg" target="_blank" data-gallery="gallery"><i class="fas fa-image"></i></a></div>
</div>
</li>
<!--Nine-->
<li class="filtr-item item-9" data-category="4">
<div class="gallery-inner">
<img src="https://s.wsj.net/public/resources/images/OD-BN613_RUMBLE_P_20170411115304.jpg" alt="Picture of a 2nd station wagon">
<div class="gallery-overlay"><a href="https://s.wsj.net/public/resources/images/OD-BN613_RUMBLE_P_20170411115304.jpg" target="_blank" data-gallery="gallery"><i class="fas fa-image"></i></a></div>
</div>
</li>
</ul>
</div>
CSS
@import url("https://fonts.googleapis.com/css2?family=Limelight&display=swap");
$cherry-pink: #ff0066;
* {
font-size: 30px;
margin: 0;
padding: 0;
font-family: "Limelight", sans-serif;
}
section {
position: relative;
overflow-x: hidden;
padding: 5px;
}
h2 {
text-transform: uppercase;
font-weight: 800;
font-size: 1.2rem;
letter-spacing: 3px;
}
.text-center {
padding-top: 40px;
}
ul {
list-style-type: none;
}
@mixin transition($duration) {
-webkit-transition: $duration;
-ms-transition: $duration;
-moz-transition: $duration;
transition: $duration;
}
@mixin transform($transform) {
-webkit-transform: $transform;
-ms-transform: $transform;
-moz-transform: $transform;
transform: $transform;
}
@mixin scale($scale) {
@include transform(scale($scale));
}
@mixin translateY($y) {
@include transform(translateY($y));
}
@mixin translate3d($translate...) {
@include transform(translate3d($translate...));
}
// BUTTON STYLING
#filter-list {
display: inline-block;
border: 1px solid #dddddd;
border-radius: 30px;
padding: 4px;
margin: 0 0 60px;
li:hover,
li.active {
background-color: $cherry-pink;
color: white;
}
li {
display: inline-block;
border-radius: 25px;
line-height: 50px;
font-size: 0.6rem;
text-transform: uppercase;
text-align: center;
cursor: pointer;
padding: 0 20px;
min-width: 130px;
@include transition(all 0.3s ease-in-out);
}
}
// CAR IMAGES
.gallery-outer {
width: 100%;
float: left;
height: auto;
padding: 0 1px;
}
.gallery-items {
position: relative;
height: 1261px;
padding: 0;
li:hover img {
@include scale(1.2);
}
li:hover .gallery-overlay {
@include translateY(-50%);
@include scale(1);
}
li {
width: 25%;
float: left;
padding: 0 1px 2px;
.filtr-item {
@include scale(1);
opacity: 1;
backface-visibility: hidden; //NEW LEARNED
position: absolute;
@include transition(all 1s ease-in-out 0ms);
perspective: 1000px; //NEW LEARNED
pointer-events: auto; //NEW LEARNED
transform-style: preserve-3d; //NEW LEARNED*/
}
.item-1 {
@include translate3d(0px, 0px, 0px);
}
.item-2 {
@include translate3d(300.25px, 0px, 0px);
}
.item-3 {
@include translate3d(630.5px, 0px, 0px);
}
.item-4{
@include translate3d(945.7px, 0px, 0px)
}
.item-5{
@include translate3d(0px, 315.25px, 0px)
}
.item-6{
@include translate3d(315.25px, 315.25px, 0px)
}
.item-7{
@include translate3d(630.5px, 315.25px, 0px)
}
.item-8{
@include translate3d(945.7px, 315.25px, 0px)
}
.item-9{
@include translate3d(0px, 630.5px, 0px)
}
img {
width: 100%;
height: auto;
@include transition(all 0.3s ease-in-out);
}
}
}
.gallery-inner {
width: 100%;
float: left;
position: relative;
overflow: hidden;
}
.gallery-overlay {
width: 100%;
position: absolute;
left: 0;
top: 50%;
text-align: center;
@include transition(all 0.3s ease-in-out);
@include scale(0);
@include translateY(-50%);
a {
display: inline-block;
line-height: 50px;
border-radius: 50%;
text-align: center;
width: 50px;
color: $cherry-pink;
font-size: 1rem;
}
a:hover {
background: $cherry-pink;
color: white;
}
}
JS
(function(x){
"use strict";
jQuery(window).on('load', function(){
preloader();
if(jQuery('.galler-outer, .gallery-items').length>0){
jQuery('.gallery-outer, .gallery-items').filterizr();
}
jQuery('filter-list li').on("click", function(){
jQuery('#filter-list li').removeClass('active');
jQuery(this).addClass('active');
});
});
function preloader(){
jQuery(".preloaderimg").fadeout();
jQuery(".preloader").delay(200).fadeout("slow").delay(200, function(){
jQuery(this).remove();
});
}) (jQuery);
注意：
我在这里和那里做了一些调整，即使用 SASS，这可能是它没有像教程那样出现的原因......
我还有很多东西要学，所以如果我可能不理解给定的解决方案并提出问题，我想再次提前道歉。
先感谢您！
[1]：https ://drive.google.com/open?id=1rgx .. [2]：https ://drive.google.com/drive/folders/1rgxXMvITdmREmFFDCOrS7c2o5z1VxA7C
解决方案
推荐阅读
- windows - 如何使用 5.0 蓝牙适配器将 esp32 蓝牙与 Windows 10 连接？
- firebase - 如何使用 datetimepicker 计算年龄？
- r - 使用 R 对数据子集和完整数据执行功能
- awk - 从 linux 终端使用 grep/awk/sed 命令从文件中读取值
- node.js - Feathers 客户端不接收来自服务器的 websocket 事件
- pytorch - 如何将连续整数值合并到 PyTorch 中的间隔中？
- java - 从 guice 私有模块中公开地图
- java - 如何使用 Java 类在 Jython 中设置 HTTPS 身份验证标头
- python - 如何单击带有请求的按钮（python）
- iframe - 有没有办法在 iframe 中导航而不在父寡妇中添加历史记录