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）！（一个位于页面顶部，另一个位于页面顶部）。我想知道是否有办法摆脱顶部的额外按钮，或在javascript函数中创建按钮元素？

感谢您的帮助。

Answer 1

您可以使用

删除javascript中的元素

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

已编辑以提供替代方法，该方法会将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

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>

用不同的图像/按钮替换图像 - JavaScript

3 个答案: