2

在一个函数中，我试图用另一个图像/按钮替换一个图像/按钮。

       <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 函数中创建按钮元素？

谢谢你的帮助。

4

3 回答 3

1

我建议类似于以下内容：

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 小提琴演示。

编辑补充说，虽然可以切换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 小提琴演示。

编辑以提供另一种方法，将元素移动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 小提琴演示。

于 2012-05-05T16:06:48.860 回答
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>
于 2012-05-05T16:09:04.483 回答
1

您可以使用删除javascript中的元素

var el = document.getElementById('id');
var remElement = (el.parentNode).removeChild(el);
于 2012-05-05T15:49:16.180 回答