画像を別の画像/ボタンに置​​き換えてください - javascript

Question

機能内で、画像/ボタンを別の画像/ボタンに置​​き換えようとしています。

 <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）が交換されたときに2つの問題があります。 （1つはページの上部にあり、もう1つはそれが意図されている）。私はトップに余分なボタンを取り除く方法、またはjavascript関数内でボタン要素を作成する方法があるかどうか疑問に思っていましたか？

ありがとうございました。

Answer 1

あなたは

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

Answer 2

を使用してJavaScriptで要素を削除することができ、私は次のように似て何かをお勧めしたい：

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を。

---

両方の画像がDOMに存在しているので、それは、不必要と思われる画像のsrc属性を切り替えることが可能であるが、それを追加するを編集。別のアプローチは、単純にクリックされた画像を非表示にして、次を表示することです：

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。

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：

---

編集

がクリックされた画像要素と同じ場所に next要素を移動させる別のアプローチを提供します。

Answer 3

画像ソースを変更するだけでなく、最初のボタンを非表示にすることができます。以下のコードは、その方法の1つを示しています。

<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>