代码之家 › 专栏 › 技术社区 › showkey

为什么nextimg和previmg不能设置元素的src属性?

css html javascript

showkey · 技术社区 · 6 年前

 
                                          
var imgs = ["https://i.stack.imgur.com/mucrb.png",
             "https://i.stack.imgur.com/0BH67.png",
             "https://i.stack.imgur.com/KdNeR.png",
             "https://i.stack.imgur.com/StOAl.png",
             "https://i.stack.imgur.com/yhvqi.png"];    
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>

我想写一个循环图像js脚本。
点击该按钮,可根据按钮中的数字显示图像。
为什么nextimg和previmg不能在单击元素时设置它们的src属性?
nextimg只能运行一次点击,不能运行第二次点击。
前一个根本不起作用。
它可以在点击按钮键时得到订单号,点击折叠键和折叠键时如何得到订单号?
声明 x = e.target.getAttribute("order"); 在nextimg和previmg中无法获取图像的订单号,如何修复?

2 回复 | 直到 6 年前

T.J. Crowder 6 年前

prevImg 和 nextImg 不工作是因为:

这些元素没有 order 属性,所以你得到 null 从 e.target.getAttribute("order") 和
在这种情况下 奈克斯替格 ,如果它做如果有这个属性,它的值将是一个字符串,所以 x = x + 1 将是 字符串连接 ,而不是添加。

相反,在变量中维护当前索引,请参见 *** 评论:

var imgs = ["https://i.stack.imgur.com/mucrb.png",
             "https://i.stack.imgur.com/0BH67.png",
             "https://i.stack.imgur.com/KdNeR.png",
             "https://i.stack.imgur.com/StOAl.png",
             "https://i.stack.imgur.com/yhvqi.png"];    
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 ,在最窄的范围内。

Ashish Ranjan 6 年前

按一下左右键,你就可以得到配角了 order 单击元素的。但事实上它没有那样的属性。我所做的是添加一个计数器,指示当前选定图像的位置。所以每当你点击左键或右键时,我都会减小/增加计数器,并用计数器索引所显示的值设置图像属性。

var imgs = ["https://i.stack.imgur.com/mucrb.png",
             "https://i.stack.imgur.com/0BH67.png",
             "https://i.stack.imgur.com/KdNeR.png",
             "https://i.stack.imgur.com/StOAl.png",
             "https://i.stack.imgur.com/yhvqi.png"];    
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>