功能使用<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>

回答

相關問題