Javascript未識別函數內的變量

-1

我正嘗試創建一個腳本，可以通過單擊練習鏈接來打開和關閉圖像。我試圖選擇一個「數據 - 」屬性，但是當我嘗試將它定義爲一個變量時，它不能識別它。它給了我空錯誤。Javascript未識別函數內的變量

這裏是我的HTML：

<a data-img="image1" id="ugur1" class="btn btn-default" href="#" role="button">Toggle Image one</a> 
<a data-img="image2" id="ugur2" class="btn btn-default" href="#" role="button">Toggle Image two</a> 
<a data-img="image3" id="ugur3" class="btn btn-default" href="#" role="button">Toggle Image three</a> 

<img src="C:\Users\Ugur Aydin\Desktop\Coding\Javascript\Images\Image1.png" class="img-responsive img hide" id="ugurpic1" alt="Responsive image" /> 
<img src="C:\Users\Ugur Aydin\Desktop\Coding\Javascript\Images\Image2.png" class="img-responsive img hide" id="ugurpic2" /> 
<img src="C:\Users\Ugur Aydin\Desktop\Coding\Javascript\Images\Image3.png" class="img-responsive img hide" id="ugurpic3" />

這裏是我的JS：

var ugur1 = document.getElementById("ugur1"); 
var ugur2 = document.getElementById("ugur2"); 
var ugur3 = document.getElementById("ugur3"); 

ugur1.addEventListener("click", picLink); 
ugur2.addEventListener("click", picLink); 
ugur3.addEventListener("click", picLink); 

function picLink() { 
    var picId = this.attributes["data-img"].value; 
    var pic = document.getElementById(picId); 
    if (pic.className === "img-responsive img hide") { 
     pic.className = "img-responsive img"; 
    } 
    else { 
     pic.className = "img-responsive img hide"; 
    }; 
}

有人可以告訴我什麼，我做錯了什麼？謝謝。

來源

2016-02-06 Sam Aydin

嘗試使用的document.getElementById（「ugurpic1」）代替的document.getElementById（「ugur1」）？ –

也許加入一些實際的數據屬性？ – adeneo

如果你檢查這個https://jsfiddle.net/278rwmp7/1/，你可以看到你沒有任何'data-img'屬性 – AshBringer

您正在用getElementById正確選擇每個a，並正確添加事件偵聽器。問題是，當您選擇data-img屬性時，它們不包含圖像的id。基本上，每次更改data-img="imageX"至data-img="ugurpicX"以正確反映圖像標記的ID，或更改圖像標記的ID。

要麼

<a data-img="ugurpic1" id="ugur1" class="btn btn-default" href="#" role="button">Toggle Image one</a> 
<a data-img="ugurpic2" id="ugur2" class="btn btn-default" href="#" role="button">Toggle Image two</a> 
<a data-img="ugurpic3" id="ugur3" class="btn btn-default" href="#" role="button">Toggle Image three</a>

或者（一個）：

<img src="C:\Users\Ugur Aydin\Desktop\Coding\Javascript\Images\Image1.png" class="img-responsive img hide" id="image1" alt="Responsive image" /> 
<img src="C:\Users\Ugur Aydin\Desktop\Coding\Javascript\Images\Image2.png" class="img-responsive img hide" id="image2" /> 
<img src="C:\Users\Ugur Aydin\Desktop\Coding\Javascript\Images\Image3.png" class="img-responsive img hide" id="image3" />

來源

2016-02-06 18:14:23 Hatchet

非常感謝你的工作！我也從中學到了！所以我明白，給數據屬性的ID必須與我試圖操作的圖像的ID相同。再次謝謝你！ –

Javascript未識別函數內的變量

回答

相關問題