JQuery 中的函数给出未定义错误
2017-12-13
1511
我正在尝试将滑块集成到我的应用程序中。 我指的是这个 w3schools 示例 。 但出于某种原因，每当页面加载时，图像都会出现一秒钟然后消失，当我单击箭头或点时，我收到如下所示的函数未定义错误。
Uncaught ReferenceError: plusSlides is not defined at HTMLAnchorElement.onclick (details.html:1)
任何帮助都将不胜感激，提前谢谢...!!! 请在下面找到我的代码。
<!DOCTYPE html>
<html>
<head>
<!-- Meta -->
<meta charset="utf-8">
<title>Xylem</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Samuel Norton">
<!-- Styles -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900|Raleway:400,300,700,600,900' rel='stylesheet' type='text/css'>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script src="http://code.jquery.com/color/jquery.color-2.1.0.min.js"></script>
<style>
* {box-sizing:border-box}
.mySlides {display:none}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
</style>
</head>
<body class="bgColor">
<div class="container-fluid">
<div>
<div>
<div>
<div class="productContent">
<a class="nextlinkProcuct"> ← GO BACK</a>
<div class="row containerDiv">
<div class="col-md-12 pd10-top pd10-bottom">
<div class="slideshow-container">
<!-- Next and previous buttons -->
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
<span class="dot" onclick="currentSlide(5)"></span>
</div>
</div>
<div class="col-md-12 title">360 View</div>
<div style="width: 400px;" class="col-md-4">
<script src='https://vizor.io/static/scripts/vizor-360-embed.js' data-vizorurl='https://vizor.io/embed/anamikabadal/americanorthcarolinamorrisville'></script>
<a href="#" data-rel="back"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$( document ).ready(function() {
var i;
var detailsDataObj = {
"Title":"XYLEM WATER SOLUTIONS INDIA PVT LTD.",
"Description":"This page will aim to list all the high level modules and the functionality (use cases) for each module. Each module can be considered an EPIC and sub-bulleted use case as super-stories. Each Super-story will have stories that will be tracked in Jira and used for Sprint planning. This page will only list epics and super - stories.",
"sliderImage":["img1.jpg","img2.jpg","img3.jpg","img4.jpg","img5.jpg"],
"Image360":"images/testing.jpeg"
}
var titleDiv = '<div class="title col-md-12 pd10-top pd10-bottom centerText">'+ detailsDataObj.Title + '</div>'; // Create text with HTML
$(".containerDiv").append(titleDiv); // Append new elements
var pageDesc = '<div class="discription col-md-12 pd10-top pd10-bottom">'+ detailsDataObj.Description + '</div>';
$(".containerDiv").append(pageDesc); // Append new elements
var prevArrow = '<a class="prev" onclick="plusSlides(-1)">❮</a>';
var nextArrow = '<a class="next" onclick="plusSlides(1)">❯</a>';
for(i=0;i<detailsDataObj.sliderImage.length;i++){
var slideContainer = '<div class="mySlides fade">';
var img = '<img height="300" ';
img+='src="'+detailsDataObj.sliderImage[i]+'"';
img+='/>';
slideContainer+=img;
slideContainer+='</div>';
$('.slideshow-container').append(slideContainer);
}
$('.slideshow-container').append(prevArrow,nextArrow);
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
});
</script>
</body>
</html>
2个回答
您正尝试从 HTML 文档全局调用函数：
onclick="plusSlides(-1)"
但这些函数是在另一个函数内的封闭范围内定义的：
$(document).ready(function() {
//...
function plusSlides(n) {
showSlides(slideIndex += n);
}
//...
});
传递给
document.ready
处理程序的匿名
function() {
内部定义的任何内容都不会在该函数外部可见。
您可以将函数分配给
window
对象：
$(document).ready(function() {
//...
window.plusSlides = function (n) {
showSlides(slideIndex += n);
};
//...
});
或者 在该范围之外定义函数：
$(document).ready(function() {
//...
});
function plusSlides(n) {
showSlides(slideIndex += n);
}
//...
出于同样的原因，您的其他函数、对这些函数的引用等可能也需要进行调整。函数外部的内容可以从函数内部访问，但反过来则不行。
David
2017-12-13
这是一个典型的范围问题。
plusSlides
在
$.ready(function)
内定义，它有自己的范围，无法在
window
级别访问。简单的解决方法是像这样重写它：
window.plusSlides = function(n) {
showSlides(slideIndex += n)
}
因此，
plusSlides
现在是一个可在
window
范围内访问的函数，但是，该函数的内容也是一个闭包，可以从
$.ready(function)
访问范围。
AP.
2017-12-13