为什么nextImg和prevImg不能设置元素的src属性？

Question

 
                                          
var imgs = ["https://istack.dev59.com/mucrb.webp",
             "https://istack.dev59.com/0BH67.webp",
             "https://istack.dev59.com/KdNeR.webp",
             "https://istack.dev59.com/StOAl.webp",
             "https://istack.dev59.com/yhvqi.webp"];    
bs = document.getElementsByTagName("button");
for(var i =0;i<bs.length;i++){
    bs[i].addEventListener("click",showImg);
}
pLeft =document.getElementById("left");
pLeft.addEventListener("click",prevImg);
pRight =document.getElementById("right");
pRight.addEventListener("click",nextImg);

function showImg(e){
    x = e.target.getAttribute("order");
    document.getElementById("loopImg").setAttribute("src",imgs[x-1]);
}  

function  nextImg(e){
    x = e.target.getAttribute("order");
    if(x == imgs.length-1){
        x = 0;}
    else{
        x = x+1;}
    document.getElementById("loopImg").setAttribute("src",imgs[x]);
}

function prevImg(e){
    x = e.target.getAttribute("order");
    if(x == 0){
        x = imgs.length-1;}
    else{
        x = x-1;}
    document.getElementById("loopImg").setAttribute("src",imgs[x]);
}

#main{
    width:600px;
    height:400px;
    border:1px solid red;
    display:grid;
    grid-template-columns:60px auto 60px;
    grid-template-rows:60px auto 60px;
    grid-template-areas:"des des des"
                         "left  loopImg  right"
                        "buttons buttons buttons";
    margin:0 auto;
}

#des{
    grid-column: 1/4;
    grid-row:1/2;
    margin:auto;
}

#loopImg{
    grid-column:2/3;
    grid-row:2/3;
    border:1px solid green;
    margin:auto;
}

#left{
    grid-column:1/2;
    grid-row:2/3;
    margin:auto;
}
#right{
    grid-column:3/4;
    grid-row:2/3;
    margin:auto;
}

#buttons{
    grid-column:1/4;
    grid-row:3/4;
    margin:auto;
}

button{
    width:30px;
    height:30px;
    border:1px solid green;
    border-radius:50%;
}

img{
    width:200px;
    height:200px;
}

<div id="main">
    <div id="des">loop images</div>
    <img id="loopImg" src="i1.png" alt="">
    <p id="left">&lt;</p>
    <p id="right">&gt;</p>
    <div id="buttons">
        <button order="1" >1</button>
        <button order="2" >2</button>
        <button order="3" >3</button>
        <button order="4" >4</button>
        <button order="5" >5</button>
    </div>
</div>

我想编写一个循环图片的JavaScript脚本。
点击按钮后，图片可以根据按钮上的数字进行显示。
为什么点击nextImg和prevImg时无法设置元素的src属性？
nextImg只能在第一次单击时起作用，第二次单击时无法运行。
prevImg根本无法工作。
当点击pLeft和pRight键时，可以获取顺序号，如何获取顺序号？
在nextImg和prevImg中，语句x = e.target.getAttribute("order");无法获取图像的顺序号，如何修复？

- showkey

---

你需要做的是将当前显示图像的索引存储到某个地方，并使用它进行操作；getAttribute("order")总是相同的值。 - Mr Lister

强烈建议采用标准的括号（{}）方案之一，而不是上面使用的方案。编辑该代码比应该更难。 - T.J. Crowder

你也在使用<button>元素；请注意，如果你将<form>标签包裹在这段代码周围，那么当你点击按钮时，它们会提交表单并重新加载页面。 - Mr Lister

用<和>替换<和>。 - showkey

您尝试获取左/右按钮的订单属性。 - SG52

Answer 1

当你点击左右按钮时，你正在尝试获取被点击元素的属性order。但实际上它没有这样的属性。

我所做的是添加一个计数器来确定当前选择的图像位置。因此，每当你单击左或右按钮时，我会递减/递增计数器，并使用计数器索引设置图像属性。

var imgs = ["https://istack.dev59.com/mucrb.webp",
             "https://istack.dev59.com/0BH67.webp",
             "https://istack.dev59.com/KdNeR.webp",
             "https://istack.dev59.com/StOAl.webp",
             "https://istack.dev59.com/yhvqi.webp"];    
bs = document.getElementsByTagName("button");
for(var i =0;i<bs.length;i++){
    bs[i].addEventListener("click",showImg);
}
pLeft =document.getElementById("left");
pLeft.addEventListener("click",prevImg);
pRight =document.getElementById("right");
pRight.addEventListener("click",nextImg);

function showImg(e){
    x = e.target.getAttribute("order");
    document.getElementById("loopImg").setAttribute("src",imgs[x-1]);
    currentImage = x-1
}  

var currentImage = 0;

function  nextImg(){
    currentImage = (currentImage + 1) % 5
    document.getElementById("loopImg").setAttribute("src",imgs[currentImage]);
}

function prevImg(){
   
    if (currentImage === 0) {
      currentImage = 4
    }
    else {
      currentImage --;
    }
    
    document.getElementById("loopImg").setAttribute("src",imgs[currentImage]);
}

#main{
    width:600px;
    height:400px;
    border:1px solid red;
    display:grid;
    grid-template-columns:60px auto 60px;
    grid-template-rows:60px auto 60px;
    grid-template-areas:"des des des"
                         "left  loopImg  right"
                        "buttons buttons buttons";
    margin:0 auto;
}

#des{
    grid-column: 1/4;
    grid-row:1/2;
    margin:auto;
}

#loopImg{
    grid-column:2/3;
    grid-row:2/3;
    border:1px solid green;
    margin:auto;
}

#left{
    grid-column:1/2;
    grid-row:2/3;
    margin:auto;
}
#right{
    grid-column:3/4;
    grid-row:2/3;
    margin:auto;
}

#buttons{
    grid-column:1/4;
    grid-row:3/4;
    margin:auto;
}

button{
    width:30px;
    height:30px;
    border:1px solid green;
    border-radius:50%;
}

img{
    width:200px;
    height:200px;
}

<div id="main">
    <div id="des">loop images</div>
    <img id="loopImg" src="i1.png" alt="">
    <p id="left"><</p>
    <p id="right">></p>
    <div id="buttons">
        <button order="1" >1</button>
        <button order="2" >2</button>
        <button order="3" >3</button>
        <button order="4" >4</button>
        <button order="5" >5</button>
    </div>
</div>

- Ashish Ranjan

Answer 2

prevImg和nextImg不起作用是因为：

1. 这些元素没有一个order属性，因此您从e.target.getAttribute("order")中得到null，并且

2. 对于nextImg，如果它有该属性，其值将是一个字符串，因此x = x + 1将是字符串连接而不是加法。

相反，将当前索引维护在一个变量中，参见***注释：

var imgs = ["https://istack.dev59.com/mucrb.webp",
             "https://istack.dev59.com/0BH67.webp",
             "https://istack.dev59.com/KdNeR.webp",
             "https://istack.dev59.com/StOAl.webp",
             "https://istack.dev59.com/yhvqi.webp"];    
var bs = document.getElementsByTagName("button"); // *** Added var
for(var i =0;i<bs.length;i++){
    bs[i].addEventListener("click",showImg);
}
var pLeft =document.getElementById("left");   // *** Added var
pLeft.addEventListener("click",prevImg);
var pRight =document.getElementById("right"); // *** Added var
pRight.addEventListener("click",nextImg);

var currentIndex = 0; // ***
// *** Reusable function so we aren't repeating ourselves constantly below
function displayImage(src) {
    // *** Notice the .src property
    document.getElementById("loopImg").src = src;
}
displayImage(imgs[0]); // *** Show the first image

function showImg(e){
    // *** Note the unary + to convert to number
    currentIndex = +e.target.getAttribute("order") - 1;
    displayImage(imgs[currentIndex]);
}  

function  nextImg(e){
    currentIndex = (currentIndex + 1) % imgs.length; // *** Wraps around
    displayImage(imgs[currentIndex]);
}

function prevImg(e){
    currentIndex = (currentIndex - 1 + imgs.length) % imgs.length; // *** Wraps around
    displayImage(imgs[currentIndex]);
}

#main{
    width:600px;
    height:400px;
    border:1px solid red;
    display:grid;
    grid-template-columns:60px auto 60px;
    grid-template-rows:60px auto 60px;
    grid-template-areas:"des des des"
                         "left  loopImg  right"
                        "buttons buttons buttons";
    margin:0 auto;
}

#des{
    grid-column: 1/4;
    grid-row:1/2;
    margin:auto;
}

#loopImg{
    grid-column:2/3;
    grid-row:2/3;
    border:1px solid green;
    margin:auto;
}

#left{
    grid-column:1/2;
    grid-row:2/3;
    margin:auto;
}
#right{
    grid-column:3/4;
    grid-row:2/3;
    margin:auto;
}

#buttons{
    grid-column:1/4;
    grid-row:3/4;
    margin:auto;
}

button{
    width:30px;
    height:30px;
    border:1px solid green;
    border-radius:50%;
}

img{
    width:200px;
    height:200px;
}

<div id="main">
    <div id="des">loop images</div>
    <img id="loopImg" src="" alt="">
    <p id="left">&lt;<!-- *** Note using entity for '<' --></p>
    <p id="right">></p>
    <div id="buttons">
        <button order="1" >1</button>
        <button order="2" >2</button>
        <button order="3" >3</button>
        <button order="4" >4</button>
        <button order="5" >5</button>
    </div>
</div>

---

顺便提一下：我没有对代码进行全面审计或类似的操作。但我注意到在多个地方，原始代码正在陷入我所谓的The Horror of Implicit Globals。请确保在最小的作用域内声明变量（bs、x、pLeft、pRight）。

- T.J. Crowder