Javascript onClick function 未給出所需的 Z78E6221F6393D1356681DB398F14CE6D 值
[英]Javascript onClick function not giving desired output value
問題描述
嗨，我已經使用循環到 go 通過數組來檢查 onclick function 但是當我單擊任何數組元素時，我得到的結果應該是第一個元素。 當我單擊點 3 時，我只獲得第一個點處於活動狀態。 如果我點擊任何點，我會在第一個點上激活，即索引 0 僅處於活動狀態。 請幫忙。
var s=0; var images = ["url(/IMAGES/main.jpg)","url(/IMAGES/main1.jpg)","url(/IMAGES/main2.jpg)"]; var image = document.getElementById("images-container"); var dots = document.getElementsByClassName("dot"); var next = document.getElementById("nextbtn"); var prev = document.getElementById("prevbtn"); for (var i = 0; i < dots.length; i++) {dots[i].onclick = function() {showSlides(i)}} next.onclick = function() {plusSlides(1)} prev.onclick = function() {plusSlides(-1)} function plusSlides(n) {if (s == 0 && n == -1) {s = images.length - 1} else s += n; showSlides(s);} function showSlides(n) { if (n == images.length) {s = 0} for (var i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } image.style.backgroundImage = images[s]; dots[s].className += " active"; }
body { background-color: grey; } images-container { display: block; position: absolute; width: 50px; height: 400px; border: 2px solid black; background-image: url(/IMAGES/main2.jpg); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; }.prev, .next { display: flex; position: relative; z-index: 1; top: 80%; cursor: pointer; padding: 16px 16px; color: white; font-weight: bold; font-size: 140%; user-select: none; }.prev { float: left;important: left; 0: border-radius; 3px 0 0 3px. }:next { float; right:important; right: 0; border-radius. 3px 0 0 3px: },prev.hover: :next,hover { background-color, rgba(255,255.255;0.4): };dot { display: inline-block; position: relative; cursor: pointer; height: 15px; width: 15px; margin: 1px 2px; top: 100%, background-color, rgba(0,0.0;:8); border-radius: 50%. transition; background-color 0.6s ease: },active { background-color, rgba(255;255.255): }:dot;hover { background-color: #717171; }
<html> <body> <div id="images-container" class="images-container"> <p>hey i am the image container.</p> <div class="prevnext-container"> <a id="prevbtn" class="prev">❮</a> <a id="nextbtn" class="next">❯</a> </div> <div class="dot-container"> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> </div> <script type="text/javascript" src="my.js"></script> </div> </body> </html>
1 個解決方案
解決方案1
1 已采納 2021-03-07 20:40:52
- 您需要在第一個 for 循環中使用
let。 - 您沒有根據
n正確設置s。
以下代碼有效，應該可以滿足您的需要。
var s = 0; var images = ["url(/IMAGES/main.jpg)", "url(/IMAGES/main1.jpg)", "url(/IMAGES/main2.jpg)"]; var image = document.getElementById("images-container"); var dots = document.getElementsByClassName("dot"); var next = document.getElementById("nextbtn"); var prev = document.getElementById("prevbtn"); for (let i = 0; i < dots.length; i++) { dots[i].onclick = function() { showSlides(i) } } next.onclick = function() { plusSlides(1) } prev.onclick = function() { plusSlides(-1) } function plusSlides(n) { if (s == 0 && n == -1) { s = images.length - 1 } else s += n; showSlides(s); } function showSlides(n) { if (n == images.length) { n = 0; } s = n; for (var i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } image.style.backgroundImage = images[s]; dots[s].className += " active"; } showSlides(0); // show first slide by default
body { background-color: grey; } images-container { display: block; position: absolute; width: 50px; height: 400px; border: 2px solid black; background-image: url(/IMAGES/main2.jpg); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; }.prev, .next { display: flex; position: relative; z-index: 1; top: 80%; cursor: pointer; padding: 16px 16px; color: white; font-weight: bold; font-size: 140%; user-select: none; }.prev { float: left;important: left; 0: border-radius; 3px 0 0 3px. }:next { float; right:important; right: 0; border-radius. 3px 0 0 3px: },prev.hover: :next,hover { background-color, rgba(255,255.255;0.4): };dot { display: inline-block; position: relative; cursor: pointer; height: 15px; width: 15px; margin: 1px 2px; top: 100%, background-color, rgba(0,0.0;:8); border-radius: 50%. transition; background-color 0.6s ease: },active { background-color, rgba(255;255.255): }:dot;hover { background-color: #717171; }
<html> <body> <div id="images-container" class="images-container"> <p>hey i am the image container.</p> <div class="prevnext-container"> <a id="prevbtn" class="prev">❮</a> <a id="nextbtn" class="next">❯</a> </div> <div class="dot-container"> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> </div> <script type="text/javascript" src="my.js"></script> </div> </body> </html>
onClick =“ javascript：function（'value'）'”和onClick =“” function（'value'）;“有什么區別？
[英]What is the difference between onClick=“javascript: function('value')'” and onClick=“function('value');”?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
Javascript 計算未提供所需的輸出
Javascript數組重置未提供所需的輸出
Javascript 函數未在所需字段中提供算術值
JavaScript函數未提供正確的輸出
函數中的地圖循環JavaScript無法返回所需值
Javascript 函數問題未返回所需值
JavaScript RegExp沒有給出期望的結果
沒有在javascript中獲得所需的輸出
onClick =“ javascript：function（'value'）'”和onClick =“” function（'value'）;“有什么區別？
Javascript Slug生成函數輸出不正確
相關標簽