簡單的圖像滑塊不工作（jQuery）

Question

我正在創建一個簡單的滑塊使用jQuery。

問題：滑塊正在消失和/或崩潰（在刷新消失之前您可以看到它）。

我在做什麼：使圖像的位置爲absolute，然後使用JavaScript在腳本中使用display屬性顯示nth索引。

不確定它是否是隱藏的CSS或JavaScript。任何想法我做錯了什麼？

$(document).ready(function() { 
 
    $('#sidebar-btn').click(function() { 
 
    $('#sidebar-nav').toggleClass('visible'); 
 
    }); 
 
}); 
 

 
var index = 0; 
 

 
function plusIndex(n) { 
 
    index = index + 1; 
 
    showImage(index); 
 
} 
 

 
/* SLIDER */ 
 
showImage(1); 
 

 
/* Slider function */ 
 
function showImage(n) { 
 

 
    var i; 
 
    var x = document.getElementsByClassName("slider-img"); 
 

 
    // for next slide - forward. 
 
    if(n > x.length) { index = 1 }; 
 
    // for prev slide - backwards 
 
    if(n < 1) { index = x.length /* last one */ }; 
 
    for(i=0; i<x.length; i++) 
 
    { 
 
    x[i].style.display = "none"; 
 
    } 
 
    x[index-1].style.display = "block"; 
 
}

.updates-box { 
 
    background-color: #f5f5f5; 
 
    text-align: center; 
 
    padding: 2rem; 
 
} 
 
.updates-item-headline { 
 
    font-weight: bold; 
 
} 
 
.updates-item { 
 
    padding: 1rem; 
 
    margin: 1rem auto; 
 
} 
 

 
.slider { 
 
    position: relative; 
 

 
} 
 
.slider-img { 
 
    position: absolute; 
 

 
} 
 
.slider .slider-btn { 
 
    position: absolute; \t 
 
    color: black; 
 
    width: 50px; 
 
    border:none; 
 
    border-radius: 25px; 
 
    top: 190px; 
 
    font-size: 35px; 
 
    margin: 1rem; 
 
} 
 
.slider #slide-btn2 { 
 
    position: relative; 
 
    float: right; 
 
} 
 
.slider #slide-btn1:hover { 
 
    box-shadow: 10px 0px 20px 0px black; 
 
} 
 
.slider #slide-btn2:hover { 
 
    box-shadow: 10px 0px 20px 0px black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="hero-box"> 
 
    <div id="slide-wrapper"> 
 
    <div class="slider"> 
 
     <div class="slide"> 
 
     <picture> 
 
      <source media="(max-width: 620px)" srcset="img/hero-slider-mobile.jpg"> 
 
      <source media="(min-width: 621)" srcset="img/hero-slider-tablet.jpg"> 
 
      <img class="slider-img" src="img/hero-slider-home.jpg" alt="Flowers"> 
 
     </picture> \t \t \t \t \t \t 
 
     </div> 
 
     <div class="slide"> 
 
     <picture> 
 
      <source media="(max-width: 620px)" srcset="img/slide-2-mobile.jpg"> 
 
      <source media="(min-width: 621)" srcset="img/slide-2-tablet.jpg"> 
 
      <img class="slider-img" src="img/slide-2-home.jpg" alt="Flowers"> 
 
     </picture> \t \t \t \t \t \t 
 
     </div> 
 
     <button class="slider-btn" id="slide-btn1">&#10094;</button> 
 
     <button class="slider-btn" id="slide-btn2">&#10095;</button> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="updates-box"> 
 
    <div class="updates-item-headline"> 
 
    <p> UPCOMING EVENT DATES</p> 
 
    </div> 
 
    <div class="updates-item"> 
 
    <img class="update-icon" src="img/dates-icon.png"> 
 
    <p><b>Thursday 3 August</b></p> 
 
    <p> Open Seminar Enrollment</p> 
 
    </div> 
 
    <div class="updates-item"> 
 
    <img class="update-icon" src="img/dates-icon.png"> 
 
    <p><b>Thursday 3 August</b></p> 
 
    <p> Open Seminar Enrollment</p> 
 
    </div> 
 
    <div class="updates-item-4"> 
 
    <img class="update-icon" src="img/dates-icon.png"> 
 
    <p><b>Thursday 3 August</b></p> 
 
    <p> Open Seminar Enrollment</p> 
 
    </div> \t \t 
 
</div>

Answer 1

在你的代碼片斷......你有錯誤：

Cannot read property 'style' of undefined"

該錯誤說x[index-1]是不確定的。
It IS undefined因爲index被定義在上述兩個if條件之一中......其中兩個都評估爲false。

1. 在if(n > x.length)：n = 1且x.length = 2
2. 在if(n < 1)：n = 1的

所以index是 「未定義」。

然後出現for循環，將所有圖像設置爲display:none。
這就是爲什麼你可能會看到他們幾毫秒刷新。

最後，x[index-1]也是undefined ..所以沒有圖像被設置回display:block。

我建議你添加那裏的條件可以進行評估，以true情況：

if(n >= 1 && n<=x.length){ index = n; }; 

console.clear(); 
 
$(document).ready(function() { 
 
    $('#sidebar-btn').click(function() { 
 
    $('#sidebar-nav').toggleClass('visible'); 
 
    }); 
 
}); 
 

 
var index = 0; 
 

 
function plusIndex(n) { 
 
    index = index + 1; 
 
    showImage(index); 
 
} 
 

 
/* SLIDER */ 
 
showImage(1); 
 

 
/* Slider function */ 
 
function showImage(n) { 
 

 
    var i; 
 
    var x = document.getElementsByClassName("slider-img"); 
 

 
    // for next slide - forward. 
 
    if(n > x.length) { index = 1 }; 
 
    // for prev slide - backwards 
 
    if(n < 1) { index = x.length /* last one */ }; 
 
    if(n >= 1 && n<=x.length){ index = n; };   // ADD THIS CASE 
 
    for(i=0; i<x.length; i++) 
 
    { 
 
    x[i].style.display = "none"; 
 
    } 
 
    x[index-1].style.display = "block"; 
 
}

.updates-box { 
 
    background-color: #f5f5f5; 
 
    text-align: center; 
 
    padding: 2rem; 
 
} 
 
.updates-item-headline { 
 
    font-weight: bold; 
 
} 
 
.updates-item { 
 
    padding: 1rem; 
 
    margin: 1rem auto; 
 
} 
 

 
.slider { 
 
    position: relative; 
 

 
} 
 
.slider-img { 
 
    position: absolute; 
 

 
} 
 
.slider .slider-btn { 
 
    position: absolute; \t 
 
    color: black; 
 
    width: 50px; 
 
    border:none; 
 
    border-radius: 25px; 
 
    top: 190px; 
 
    font-size: 35px; 
 
    margin: 1rem; 
 
} 
 
.slider #slide-btn2 { 
 
    position: relative; 
 
    float: right; 
 
} 
 
.slider #slide-btn1:hover { 
 
    box-shadow: 10px 0px 20px 0px black; 
 
} 
 
.slider #slide-btn2:hover { 
 
    box-shadow: 10px 0px 20px 0px black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="hero-box"> 
 
    <div id="slide-wrapper"> 
 
    <div class="slider"> 
 
     <div class="slide"> 
 
     <picture> 
 
      <source media="(max-width: 620px)" srcset="img/hero-slider-mobile.jpg"> 
 
      <source media="(min-width: 621)" srcset="img/hero-slider-tablet.jpg"> 
 
      <img class="slider-img" src="http://lorempixel.com/400/200/cats" alt="Flowers"> 
 
     </picture> \t \t \t \t \t \t 
 
     </div> 
 
     <div class="slide"> 
 
     <picture> 
 
      <source media="(max-width: 620px)" srcset="img/slide-2-mobile.jpg"> 
 
      <source media="(min-width: 621)" srcset="img/slide-2-tablet.jpg"> 
 
      <img class="slider-img" src="http://lorempixel.com/400/200/nature" alt="Flowers"> 
 
     </picture> \t \t \t \t \t \t 
 
     </div> 
 
     <button class="slider-btn" id="slide-btn1">&#10094;</button> 
 
     <button class="slider-btn" id="slide-btn2">&#10095;</button> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="updates-box"> 
 
    <div class="updates-item-headline"> 
 
    <p> UPCOMING EVENT DATES</p> 
 
    </div> 
 
    <div class="updates-item"> 
 
    <img class="update-icon" src="img/dates-icon.png"> 
 
    <p><b>Thursday 3 August</b></p> 
 
    <p> Open Seminar Enrollment</p> 
 
    </div> 
 
    <div class="updates-item"> 
 
    <img class="update-icon" src="img/dates-icon.png"> 
 
    <p><b>Thursday 3 August</b></p> 
 
    <p> Open Seminar Enrollment</p> 
 
    </div> 
 
    <div class="updates-item-4"> 
 
    <img class="update-icon" src="img/dates-icon.png"> 
 
    <p><b>Thursday 3 August</b></p> 
 
    <p> Open Seminar Enrollment</p> 
 
    </div> \t \t 
 
</div>