我想在制作3s动画后显示页面内容，但是出现错误：Uncaught TypeError：无法读取未定义的属性“ toLowerCase” 在w.fn.init.val（jquery.min.js：2） 在galery.html：193。如何保存它？
$(document).ready(function(){
$("#dropdown").change(function(){
$('.loader').fadeIn();
$('.div').hide();
setTimeout(function () {
$('.loader').fadeOut();
$("#" + $(this).val()).show();
},3000);
});
});
答案 0 :(得分：1)
问题在于您已经失去了超时功能内的“此上下文”。解决方案是为其设置变量。
var val = $(this).val();
$(document).ready(function() {
$("#dropdown").change(function() {
var val = $(this).val();
$('.loader').fadeIn();
$(".div").hide();
setTimeout(function() {
$('.loader').fadeOut();
$("#" + val).show();
}, 3000);
});
});.loader {
border: 16px solid #ff6600;
/* Light grey */
border-top: 16px solid #3498db;
/* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
position: absolute;
top: 48%;
left: 48%;
display: none;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}<html lang="ro">
<head>
<title>Cars World/Gallery</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<link href="cars_world_image/Luxury_Sports_Car_Front_View-128.png" rel="icon" type="image/x-icon">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<base href="\">
<link href="cars-world_css/cars_world_gallery.css" rel="stylesheet">
<link href="baguetteBox.css" rel="stylesheet">
<script src="baguetteBox.js"></script>
<style>
body {
background: #000;
}
</style>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#scopertenav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html" target="_self">Cars World</a>
</div>
<div class="collapse navbar-collapse" id="scopertenav">
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html" target="_self">Home</a></li>
<li class="active"><a href="galery.html">Galerie</a></li>
<li><a href="cars_video.html" target="_self">Video</a></li>
<li><a href="documentary.html" target="_self">Documentary</a></li>
<li><a href="news.html" target="_self">News</a></li>
<li><a href="#" target="_self">Contact</a></li>
</ul>
</div>
</div>
</nav>
<div class="form-group container">
<select class="form-control" id="dropdown">
<option>Name of the brands</option>
<option value="cars1">Acura</option>
<option value="cars2">Div 2</option>
</select>
</div>
<div class="loader" id="loader"></div>
<div class="div" id="cars1" style="display: block;">
<div class="cars_world_sharch_gallery container">
<h2 class="text-center">Acura ILX</h2>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 baguetteBoxOne">
<!--Imaginea_1-->
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-3">
<a href="cars_world_image/Acura/Acura_ILX/acura_ilx_1.jpg ">
<img class="cars_world_image_gallery" alt="Acura ILX 1" src="cars_world_image/Acura/Acura_ILX/acura_ilx_1.jpg ">
</a>
</div>
<!--Imaginea_2-->
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-3">
<a href="cars_world_image/Acura/Acura_ILX/acura_ilx_2.jpg ">
<img class="cars_world_image_gallery" alt="Acura ILX 2" src="cars_world_image/Acura/Acura_ILX/acura_ilx_2.jpg ">
</a>
</div>
<!--Imaginea_3-->
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-3">
<a href="cars_world_image/Acura/Acura_ILX/acura_ilx_3.jpg ">
<img class="cars_world_image_gallery" alt="Acura ILX 3" src="cars_world_image/Acura/Acura_ILX/acura_ilx_3.jpg ">
</a>
</div>
<!--Imaginea_4-->
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-3">
<a href="cars_world_image/Acura/Acura_ILX/acura_ilx_4.jpg ">
<img class="cars_world_image_gallery" alt="Acura ILX 4" src="cars_world_image/Acura/Acura_ILX/acura_ilx_4.jpg ">
</a>
</div>
<!--Imaginea_5-->
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-3">
<a href="cars_world_image/Acura/Acura_ILX/acura_ilx_5.jpg ">
<img class="cars_world_image_gallery" alt="Acura ILX 5" src="cars_world_image/Acura/Acura_ILX/acura_ilx_5.jpg ">
</a>
</div>
<!--Imaginea_6-->
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-3">
<a href="cars_world_image/Acura/Acura_ILX/acura_ilx_6.jpg ">
<img class="cars_world_image_gallery" alt="Acura ILX 6" src="cars_world_image/Acura/Acura_ILX/acura_ilx_6.jpg ">
</a>
</div>
<!--Imaginea_7-->
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-3">
<a href="cars_world_image/Acura/Acura_ILX/acura_ilx_7.jpg ">
<img class="cars_world_image_gallery" alt="Acura ILX 7" src="cars_world_image/Acura/Acura_ILX/acura_ilx_7.jpg ">
</a>
</div>
<!--Imaginea_8-->
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-3">
<a href="cars_world_image/Acura/Acura_ILX/acura_ilx_8.jpg ">
<img class="cars_world_image_gallery" alt="Acura ILX 8" src="cars_world_image/Acura/Acura_ILX/acura_ilx_8.jpg ">
</a>
</div>
<!--Imaginea_9-->
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-3">
<a href="cars_world_image/Acura/Acura_ILX/acura_ilx_9.jpg ">
<img class="cars_world_image_gallery" alt="Acura ILX 9" src="cars_world_image/Acura/Acura_ILX/acura_ilx_9.jpg ">
</a>
</div>
<!--Imaginea_10-->
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-3">
<a href="cars_world_image/Acura/Acura_ILX/acura_ilx_10.jpg ">
<img class="cars_world_image_gallery" alt="Acura ILX 10" src="cars_world_image/Acura/Acura_ILX/acura_ilx_10.jpg ">
</a>
</div>
<!--Imaginea_11-->
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-3">
<a href="cars_world_image/Acura/Acura_ILX/acura_ilx_11.jpg ">
<img class="cars_world_image_gallery" alt="Acura ILX 11" src="cars_world_image/Acura/Acura_ILX/acura_ilx_11.jpg ">
</a>
</div>
<!--Imaginea_12-->
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-3">
<a href="cars_world_image/Acura/Acura_ILX/acura_ilx_13.jpg ">
<img class="cars_world_image_gallery" alt="Acura ILX 12" src="cars_world_image/Acura/Acura_ILX/acura_ilx_13.jpg ">
</a>
</div>
<!--Imaginea_13-->
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-3">
<a href="cars_world_image/Acura/Acura_ILX/acura_ilx_16.jpg ">
<img class="cars_world_image_gallery" alt="Acura ILX 13" src="cars_world_image/Acura/Acura_ILX/acura_ilx_16.jpg ">
</a>
</div>
<!--Imaginea_14-->
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-3">
<a href="cars_world_image/Acura/Acura_ILX/acura_ilx_15.jpg ">
<img class="cars_world_image_gallery" alt="Acura ILX 14" src="cars_world_image/Acura/Acura_ILX/acura_ilx_15.jpg ">
</a>
</div>
</div>
</div>
</div>
</div>
<div class="div" id="cars2" style="display: none;">Div 2</div>
<div id="baguetteBox-overlay" role="dialog" aria-describedby="baguetteBox-figcaption-0 baguetteBox-figcaption-1 baguetteBox-figcaption-2 baguetteBox-figcaption-3 baguetteBox-figcaption-4 baguetteBox-figcaption-5 baguetteBox-figcaption-6 baguetteBox-figcaption-7 baguetteBox-figcaption-8 baguetteBox-figcaption-9 baguetteBox-figcaption-10 baguetteBox-figcaption-11 baguetteBox-figcaption-12 baguetteBox-figcaption-13"
aria-labelledby="baguetteBox-figure-0 baguetteBox-figure-1 baguetteBox-figure-2 baguetteBox-figure-3 baguetteBox-figure-4 baguetteBox-figure-5 baguetteBox-figure-6 baguetteBox-figure-7 baguetteBox-figure-8 baguetteBox-figure-9 baguetteBox-figure-10 baguetteBox-figure-11 baguetteBox-figure-12 baguetteBox-figure-13"
style="display: none; background-color: rgba(0, 0, 0, 0.8);">
<div id="baguetteBox-slider" style="transition:opacity 0.4s; opacity: 1; transform: translate3d(-1200%, 0px, 0px);">
<div class="full-image" id="baguette-img-0">
<figure id="baguetteBox-figure-0"><img alt="Acura ILX 1" src="https://carsworldro.000webhostapp.com/cars_world_image/Acura/Acura_ILX/acura_ilx_1.jpg"></figure>
</div>
<div class="full-image" id="baguette-img-1">
<figure id="baguetteBox-figure-1"><img alt="Acura ILX 2" src="https://carsworldro.000webhostapp.com/cars_world_image/Acura/Acura_ILX/acura_ilx_2.jpg"></figure>
</div>
<div class="full-image" id="baguette-img-2">
<figure id="baguetteBox-figure-2"><img alt="Acura ILX 3" src="https://carsworldro.000webhostapp.com/cars_world_image/Acura/Acura_ILX/acura_ilx_3.jpg"></figure>
</div>
<div class="full-image" id="baguette-img-3">
<figure id="baguetteBox-figure-3"><img alt="Acura ILX 4" src="https://carsworldro.000webhostapp.com/cars_world_image/Acura/Acura_ILX/acura_ilx_4.jpg"></figure>
</div>
<div class="full-image" id="baguette-img-4">
<figure id="baguetteBox-figure-4"><img alt="Acura ILX 5" src="https://carsworldro.000webhostapp.com/cars_world_image/Acura/Acura_ILX/acura_ilx_5.jpg"></figure>
</div>
<div class="full-image" id="baguette-img-5">
<figure id="baguetteBox-figure-5"><img alt="Acura ILX 6" src="https://carsworldro.000webhostapp.com/cars_world_image/Acura/Acura_ILX/acura_ilx_6.jpg"></figure>
</div>
<div class="full-image" id="baguette-img-6">
<figure id="baguetteBox-figure-6"><img alt="Acura ILX 7" src="https://carsworldro.000webhostapp.com/cars_world_image/Acura/Acura_ILX/acura_ilx_7.jpg"></figure>
</div>
<div class="full-image" id="baguette-img-7">
<figure id="baguetteBox-figure-7"><img alt="Acura ILX 8" src="https://carsworldro.000webhostapp.com/cars_world_image/Acura/Acura_ILX/acura_ilx_8.jpg"></figure>
</div>
<div class="full-image" id="baguette-img-8">
<figure id="baguetteBox-figure-8"><img alt="Acura ILX 9" src="https://carsworldro.000webhostapp.com/cars_world_image/Acura/Acura_ILX/acura_ilx_9.jpg"></figure>
</div>
<div class="full-image" id="baguette-img-9"></div>
<div class="full-image" id="baguette-img-10">
<figure id="baguetteBox-figure-10"><img alt="Acura ILX 11" src="https://carsworldro.000webhostapp.com/cars_world_image/Acura/Acura_ILX/acura_ilx_11.jpg"></figure>
</div>
<div class="full-image" id="baguette-img-11">
<figure id="baguetteBox-figure-11"><img alt="Acura ILX 12" src="https://carsworldro.000webhostapp.com/cars_world_image/Acura/Acura_ILX/acura_ilx_13.jpg"></figure>
</div>
<div class="full-image" id="baguette-img-12">
<figure id="baguetteBox-figure-12"><img alt="Acura ILX 13" src="https://carsworldro.000webhostapp.com/cars_world_image/Acura/Acura_ILX/acura_ilx_16.jpg"></figure>
</div>
<div class="full-image" id="baguette-img-13">
<figure id="baguetteBox-figure-13"><img alt="Acura ILX 14" src="https://carsworldro.000webhostapp.com/cars_world_image/Acura/Acura_ILX/acura_ilx_15.jpg"></figure>
</div>
</div><button class="baguetteBox-button" id="previous-button" aria-label="Previous" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="44" height="60"><polyline fill="none" stroke="rgba(255, 255, 255, 0.5)" stroke-linecap="butt" stroke-linejoin="round" stroke-width="4" points="30,10 10,30 30,50" /></svg></button>
<button class="baguetteBox-button" id="next-button" aria-label="Next" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="44" height="60"><polyline fill="none" stroke="rgba(255, 255, 255, 0.5)" stroke-linecap="butt" stroke-linejoin="round" stroke-width="4" points="14,10 34,30 14,50" /></svg></button>
<button
class="baguetteBox-button" id="close-button" aria-label="Close" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30"><g stroke="rgb(160, 160, 160)" stroke-width="4"><line x1="5" y1="5" x2="25" y2="25" /><line x1="5" y1="25" x2="25" y2="5" /></g></svg></button>
</div>
<div style="text-align: right;position: fixed;z-index:9999999;bottom: 0; width: 100%;cursor: pointer;line-height: 0;display:block !important;">
<a title="Hosted on free web hosting 000webhost.com. Host your own website for FREE." href="https://www.000webhost.com/?utm_source=000webhostapp&utm_campaign=000_logo&utm_medium=website_carsworldro&utm_content=footer_img" target="_blank"><img alt="www.000webhost.com" src="https://cdn.rawgit.com/000webhost/logo/e9bd13f7/footer-powered-by-000webhost-white2.png"></a>
</div>
</body>
</html>