如何替換Html標籤？

Question

請檢查我的代碼：

<div id="seconds"> 
    <a onclick="ChangeRefreshSeconds(15,this);" href="javascript:;">15</a> 
    <b><span style="background-color:yellow;">30</span></b> 
    <a onclick="ChangeRefreshSeconds(60,this);" href="javascript:;">60</a> 
    <a onclick="ChangeRefreshSeconds(120,this);" href="javascript:;">120</a> 
</div> 

我現在的號碼是30，當我在數60單擊它應該是─

<div id="seconds"> 
    <a onclick="ChangeRefreshSeconds(15,this);" href="javascript:;">15</a> 
    <a onclick="ChangeRefreshSeconds(30,this);" href="javascript:;">30</a> 
    <b><span style="background-color:yellow;">60</span></b> 
    <a onclick="ChangeRefreshSeconds(120,this);" href="javascript:;">120</a> 
</div> 

的Javascript：

<script> 
function ChangeRefreshSeconds(s,t){ 
    //t.innerHTML='<span style="background-color:yellow;">'+s+'</span>'; 
    var textnode=document.createTextNode('<span style="background-color:yellow;">'+s+'</span>'); 
    t.replaceChild(textnode,t); 
} 
</script> 

我相信，我寫錯了我的JavaScript代碼。

請解決我上面的代碼。

Answer 1

像這樣的事情會方便很多與jQuery，如果你要使用它的可能性，我肯定會勸你。

據我所見，您的代碼只更改爲<span>，並且不會將已更改的<span's>更改回<a>。我以爲這就是你想要的？這個腳本（jQuery中）的一段代碼看起來是這樣的：

$("div#seconds a").click(function(){ 
    var originalValue = $(this).html(); 
    var spanValue = $("b span", $(this).parent()).html(); 

    $("b", $(this).parent()).replaceWith('<a href="javascript:;">'+spanValue+'</a>'); 
    $(this).replaceWith('<b><span style="background-color:yellow;">'+originalValue+'</span></b>'); 
}); 

Answer 2

您可以更換標籤。但是你不必這樣做。僅使用CSS方法就簡單多了，而且不那麼突兀。使用CSS，當您有active級別的課程時，您可以靈活地調整當前所選項目的樣式，無論您想要什麼。

function ChangeRefreshSeconds(seconds, obj) { 
 

 
    // do nothing if it's already active 
 
    if (obj.className === 'active') return; 
 

 
    var a = document.getElementById('seconds').children; 
 
    for (var i = 0; i < a.length; i++) { 
 
     a[i].className = ''; 
 
    } 
 
    obj.className = 'active'; 
 

 
    // do something else 
 
    alert('Current seconds: ' + seconds); 
 
}

#seconds .active, 
 
#seconds .active:active { 
 
    background: yellow; 
 
    cursor: default; 
 
    color: #333; 
 
    font-weight: bold; 
 
}

<div id="seconds"> 
 
    <a onclick="ChangeRefreshSeconds(15, this);" href="javascript:;">15</a> 
 
    <a onclick="ChangeRefreshSeconds(30, this);" href="javascript:;" class="active">30</a> 
 
    <a onclick="ChangeRefreshSeconds(60, this);" href="javascript:;">60</a> 
 
    <a onclick="ChangeRefreshSeconds(120, this);" href="javascript:;">120</a> 
 
</div>

Answer 3

試試這個：

<script> 
    function ChangeRefreshSeconds(s,t){ 
     var textnode=document.createTextNode('<span style="backgroundcolor:yellow;">'+s+'</span>'); 
     t.parentNode.replaceChild(textnode,t); 
    } 
</script> 

Answer 4

以下是我的方法，嘗試這個

function ChangeRefreshSeconds(event){ 
 
    event = event || window.event; 
 
    var seconds = document.getElementById('seconds'); 
 
    var anchors = seconds.getElementsByTagName('a'); 
 
    
 
    var i; 
 
    for (i = 0; i < anchors.length; i++) { 
 
     anchors[i].className = ''; 
 
    } 
 
    
 
    event.target.className = 'active'; 
 
}

.active { 
 
    background-color:yellow; 
 
}

<div id="seconds"> 
 
    <a onclick="ChangeRefreshSeconds(event);" href="javascript:;">15</a> 
 
    <a onclick="ChangeRefreshSeconds(event);" href="javascript:;">30</a> 
 
    <a onclick="ChangeRefreshSeconds(event);" href="javascript:;">60</a> 
 
    <a onclick="ChangeRefreshSeconds(event);" href="javascript:;">120</a> 
 
</div>