다른 이미지/버튼으로 이미지 바꾸기 - 자바 스크립트

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 개)가 있습니다. (하나는 페이지 상단에, 다른 하나는 원래 위치). 상단에 여분의 버튼을 없애거나 javascript 함수 내에서 button 요소를 만드는 방법이 있는지 궁금합니다.

도움 주셔서 감사합니다.

Answer 1

당신은 내가 다음에 가깝다 무언가를 건의 할 것

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

Answer 2

사용하여 자바 스크립트 요소를 제거 할 수 있습니다

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.

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

이미지 소스를 변경하는 것뿐만 아니라 첫 번째 버튼을 숨길 수 있습니다. 아래 코드는이를 수행하는 한 가지 방법을 보여줍니다.

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