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）が2つあるという問題があります！（1つはページの上部にあり、もう1つは本来あるべき場所にあります）。上部の余分なボタンを取り除く方法、またはjavascript関数内にボタン要素を作成する方法があるかどうか疑問に思っていましたか？

助けてくれてありがとう。

4

3 に答える 3

1

を使用してJavaScriptの要素を削除できます

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

画像ソースを変更するだけでなく、最初のボタンを非表示にすることもできます。以下のコードは、その方法の 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

次のようなものをお勧めします。

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 に答える