功能使用<a>

当我点击<a>链接但它不起作用时，我必须将它们切换为以下图像。当我在图像中使用'onclick'引用时，它的作用不大，但不在链接中。功能使用<a>

下面是代码：

var images=Array("1.png","2.jpg","3.png"); 
var visibleImage=0; 
var a = document.getElementById("link"); 

function change(img) 
{ 
    visibleImage++; 
    if(visibleImage>=images.length) 
    { 
     visibleImage=0; 
    } 
    img.src=images[visibleImage]; 
}

图像看起来是这样的：

<img src="1.png" onclick="change(this);">

的HREF链接是这样的：

<a href="#" onclick="change(this);">Click to change</a>

来源

2017-05-31 Manuel Peña Cantón

以及'this'不是一个图像，当元素是一个''。什么是图像与''的关系？如果只有一个图像，给它一个ID，并使用它作为参考来改变src – charlietfl

问题可能是，当你把“onclick”放在img上时，“this”就是图像，当你把“onclick”放在，“this”是点击 –

我建议删除所有内联js并移入脚本文件。 Buuut在这 - 你想要做的是添加一个'data'标签，所以你的链接设置为'Click to change'，然后你可以操作，但是你看到的是合适的 – ThisGuyHasTwoThumbs

你正在改变的this的src属性，这是你当前与之交互的元素（它是<a>）。您可以在函数中传递document.getElementById('image')，但我认为最好在函数中使用它。

在不改变你的函数：

var images=Array("1.png","2.jpg","3.png"); 
 
var visibleImage=0; 
 
var a = document.getElementById("link"); 
 

 
function change(img) 
 
{ 
 
    visibleImage++; 
 
    if(visibleImage>=images.length) 
 
    { 
 
     visibleImage=0; 
 
    } 
 
    img.src=images[visibleImage]; 
 
    
 
    console.log(img.src); 
 
}

<img src="1.png" onclick="change(this);" id='image'> 
 
<a href="#" onclick="change(document.getElementById('image'));">Click to change</a>

一个更容易理解的功能：

var images=Array("1.png","2.jpg","3.png"); 
 
var visibleImage=0; 
 
var a = document.getElementById("link"); 
 

 
function change() 
 
{ 
 
    img = document.getElementById("image"); 
 
    visibleImage++; 
 
    if(visibleImage>=images.length) 
 
    { 
 
     visibleImage=0; 
 
    } 
 
    img.src=images[visibleImage]; 
 
    
 
    console.log(img.src); 
 
}

<img src="1.png" onclick="change();" id='image'> 
 
<a href="#" onclick="change();">Click to change</a>

来源

2017-05-31 13:20:32

这在<img>标记将自身作为值传递给函数，并且因为它执行没有任何问题，所以使用<a>标记将标记传递给函数更改。

你应该看看Mozilla上的Firebug，或Chrome中普通的'检查元素'以及其他一些浏览器' - 右键单击上下文菜单，以调试JavaScript并可视化作为参数传递的内容。

来源

2017-05-31 13:20:52

如果我是你，我会用addEventListener ...

var images = [ 
 
    'http://i3.kym-cdn.com/photos/images/newsfeed/000/170/791/welcome-to-the-internet-internet-demotivational-poster-1264714433.png.jpg', 
 
    'https://s-media-cache-ak0.pinimg.com/736x/a5/98/1f/a5981fcc09689034ec9dc9201c9787f5.jpg', 
 
    'http://s2.quickmeme.com/img/b3/b3bd9df9b60b8abc7f1253908756964c37e17262e6df6be51bc4a528183e2c96.jpg' 
 
]; 
 
    
 
var visibleImage = 0, 
 
    a = document.querySelector('a'), 
 
    img = document.querySelector('img'); 
 

 
a.addEventListener('click', change, false); 
 

 
function change() { 
 
    visibleImage++; 
 
    if(visibleImage >= images.length) { 
 
    visibleImage = 0; 
 
    } 
 
    img.src = images[visibleImage]; 
 
}

<a href="#">Click to change</a> 
 
<hr> 
 
<img src="http://i3.kym-cdn.com/photos/images/newsfeed/000/170/791/welcome-to-the-internet-internet-demotivational-poster-1264714433.png.jpg">

来源

2017-05-31 13:27:51 Badacadabra

功能使用<a>

回答

相关问题