用不同的圖像/按鈕替換圖像 - javascript

在一個函數內，我試圖用另一個圖像/按鈕替換圖像/按鈕。用不同的圖像/按鈕替換圖像 - javascript

 <img src="images/14.gif" id="ImageButton1" onClick="showLoad()">  
     <img src="images/getld.png" id="ImageButton2" alt="Get Last Digits" style="display:none;" onClick="showLock()" /> 

      <script type="text/javascript" language="javascript"> 

      function swapButton(){ 
        document.getElementById('ImageButton1').src = document.getElementById('ImageButton2').src; 
       } 
</script>

但我有問題，有兩個相同的按鈕，（按鈕2）時，它被取代！（一個位於頁面的頂部，另一個位於該位置）。我想知道是否有辦法擺脫頂部的額外按鈕，或者在javascript函數中創建按鈕元素？

感謝您的任何幫助。

來源

2012-05-05 Harry

您可以使用JavaScript中

var el = document.getElementById('id'); 
var remElement = (el.parentNode).removeChild(el);

來源

2012-05-05 15:49:16

我建議一個類似於下面的刪除一個元素：

function swapImageSrc(elem, nextElemId) { 
    if (!elem) { 
     return false; 
    } 
    if (!nextElemId || !document.getElementById(nextElemId)) { 
     var id = elem.id.replace(/\d+/, ''), 
      nextNum = parseInt(elem.id.match(/\d+/), 10) + 1, 
      next = document.getElementById(id + nextNum).src; 
    } 
    else { 
     var next = document.getElementById(nextElemId).src; 
    } 

    elem.src = next; 
} 

var images = document.getElementsByTagName('img'); 

for (var i = 0, len = images.length; i < len; i++) { 
    images[i].onclick = function() { 
     swapImageSrc(this,imgButton2); 
    }; 
}

JS Fiddle demo。

被修改補充的是，雖然可以切換src屬性的圖像的看來不必要的，因爲這兩個圖像都存在於DOM。另一種方法是簡單地隱藏點擊圖像，並顯示下一個：

function swapImageSrc(elem, nextElemId) { 
    if (!elem) { 
     return false; 
    } 
    if (!nextElemId || !document.getElementById(nextElemId)) { 
     var id = elem.id.replace(/\d+/, ''), 
      nextNum = parseInt(elem.id.match(/\d+/), 10) + 1, 
      next = document.getElementById(id + nextNum); 
    } 
    else { 
     var next = document.getElementById(nextElemId); 
    } 
    if (!next){ 
     return false; 
    } 
    elem.style.display = 'none'; 
    next.style.display = 'inline-block'; 
} 

var images = document.getElementsByTagName('img'); 

for (var i = 0, len = images.length; i < len; i++) { 
    images[i].onclick = function() { 
     swapImageSrc(this,imgButton2); 
    }; 
}

JS Fiddle demo。

被修改提供另一種方法，其next元件移動到相同的位置被點擊的圖像元素：

function swapImageSrc(elem, nextElemId) { 
    if (!elem) { 
     return false; 
    } 
    if (!nextElemId || !document.getElementById(nextElemId)) { 
     var id = elem.id.replace(/\d+/, ''), 
      nextNum = parseInt(elem.id.match(/\d+/), 10) + 1, 
      next = document.getElementById(id + nextNum); 
    } 
    else { 
     var next = document.getElementById(nextElemId); 
    } 
    if (!next){ 
     return false; 
    } 
    elem.parentNode.insertBefore(next,elem.nextSibling); 
    elem.style.display = 'none'; 
    next.style.display = 'inline-block'; 
} 

var images = document.getElementsByTagName('img'); 

for (var i = 0, len = images.length; i < len; i++) { 
    images[i].onclick = function() { 
     swapImageSrc(this,imgButton2); 
    }; 
}

JS Fiddle demo。

來源

2012-05-05 16:06:48

您可以隱藏第一個按鈕，不僅可以更改圖像源。下面的代碼顯示了一種做法。

<img src="images/14.gif" id="ImageButton1" onClick="swapButtons(false)" style="visibility: visible;" />  
<img src="images/getld.png" id="ImageButton2" alt="Get Last Digits" style="visibility: hidden;" onClick="swapButtons(true)" /> 

<script type="text/javascript" language="javascript"> 
    function swapButtons(show1) { 
     document.getElementById('ImageButton1').style.visibility = show1 ? 'visible' : 'hidden'; 
     document.getElementById('ImageButton2').style.visibility = show1 ? 'hidden' : 'visible'; 
    } 
</script>

來源

2012-05-05 16:09:04 carlosfigueira

用不同的圖像/按鈕替換圖像 - javascript

回答

相關問題