Javascript函數changeImage：使用getElementById或getElementsByName變量的問題

我在執行我想要的代碼時遇到了一些麻煩。我有多個部分，我已經設置切換顯示/隱藏，並且它的功能正確。但是，我現在試圖將圖像切換到「更多」，而不是始終靜止的位置，我希望它在展開時切換到「較少」。Javascript函數changeImage：使用getElementById或getElementsByName變量的問題

它確實有效......但只適用於第一個。如果我按任何其他按鈕，它只會改變第一個按鈕。你可以在這裏看到的頁面：

http://jfaq.us

我試着變量幾個不同的解決方案，但我似乎無法得到它的工作。

幫助？提前致謝！

function changeImage() { 
    if (document.getElementById("moreorless").src == "http://jfaq.us/more.png") 
    { 
     document.getElementById("moreorless").src = "http://jfaq.us/less.png"; 
    } 
    else 
    { 
     document.getElementById("moreorless").src = "http://jfaq.us/more.png"; 
    } 
} 

function toggleMe(a){ 
    var e=document.getElementById(a); 
    if(!e)return true; 
    if(e.style.display=="none") 
    { 
     e.style.display="block" 
    } 
    else{ 
     e.style.display="none" 
    } 
    return true; 
}

<div> 

    <a href="http://jfaq.us/guestbook">Guestbook</a> 

    <div> 

     <input type="image" src="http://jfaq.us/more.png" id="moreorless" onclick="changeImage();return toggleMe('para3')" > 

    </div> 

<div id="para3" style="display:none"> 

This is normally hidden, but shows up upon expanding. 
This is normally hidden, but shows up upon expanding. 

</div> 

    <a href="http://jfaq.us/about">About</a> 

    <div> 

     <input type="image" src="http://jfaq.us/more.png" id="moreorless" onclick="changeImage();return toggleMe('para2')" > 

    </div> 

<div id="para2" style="display:none"> 

This is normally hidden, but shows up upon expanding. 
This is normally hidden, but shows up upon expanding. 

</div> 

</div>

來源

2013-08-02 Johnathan ' Zy' Sawyer

你所有的按鈕具有相同的ID。 ID在文檔中應該是唯一的。如果要使用選擇器來定位多個元素，請使用類，或將事件傳遞到事件處理函數中並使用它。 – godfrzero

是的，我知道這一點。我把這個基本代碼工作，因爲我沒有運氣使用getElementsByName或getElementsbyClassName在我的嘗試。你能提供一個小例子嗎？我對javascript還是有點新鮮。 –

它看起來像你有jQuery包括，即使它是一箇舊版本。如果您更新版本並從腳本開始綁定事件，您的代碼可能會看起來更清晰。 – godfrzero

id屬性必須是唯一的。這就是爲什麼它不起作用。此外，使用內聯事件處理程序並不是一個好主意，您應該使用addEventListener來註冊事件處理程序。

在不更改所有代碼的情況下，您可以做的一件事是將對當前單擊元素的引用傳遞給changeImage函數。

function changeImage(el) { 
    var moreUrl = 'http://jfaq.us/more.png'; 
    el.src = el.src === moreUrl? 'http://jfaq.us/less.png' : moreUrl; 
}

然後，更改在線處理程序onclick="changeImage(this);"

來源

2013-08-02 18:30:50 plalx

這工作完美。非常感謝你！ –

有沒有一種快速的方法來在我的代碼中添加一個700毫秒的淡入/淡出，還是我最好使用CSS淡入淡出？ –

那是因爲你用相同的ID爲兩個圖像，並且顯然的getElementById採取的第一個。

下面是更新後的代碼： HTML：

<input type="image" src="http://jfaq.us/more.png" id="moreorless" onclick="changeImage.call(this);return toggleMe('para3')" >

腳本：

// inside the event handler 'this' refers to the element clicked 
function changeImage() { 
    if (this.src == "http://jfaq.us/more.png") { 
     this.src = "http://jfaq.us/less.png"; 
    } else { 
     this.src = "http://jfaq.us/more.png"; 
    } 
}

來源

2013-08-02 18:24:46 amakhrov

這是不正確的。在這種情況下，上下文對象將成爲窗口，您將在窗口對象上設置「src」屬性。 – plalx

是的。也可以這樣改變'onlick'的定義： – amakhrov

您正在使用相同的ID來進行輸入。這是造成這個問題的原因。爲每個元素指定一個唯一的ID。

如果要執行grp操作，請使用jquery類。

來源

2013-08-02 18:28:06 Rupesh

檢查這個

http://jsfiddle.net/Asb5A/3/

function changeImage(ele) { 
if (ele.src == "http://jfaq.us/more.png") 
{ 
    ele.src = "http://jfaq.us/less.png"; 
} 
else 
{ 
    ele.src = "http://jfaq.us/more.png"; 
} 
} 

<input type="image" src="http://jfaq.us/more.png" onclick="changeImage(this);return toggleMe('para3')" >

來源

2013-08-02 18:58:03 Sam4Code

Javascript函數changeImage：使用getElementById或getElementsByName變量的問題

回答

相關問題