切換語言的屬性

Question

閱讀後，我無法找到任何解釋爲什麼這不起作用。 假如我得到這個HTML：

<p lang="xx">bla bla bla bla</p> 
<p lang="xy">yada yada yada</p> 
<p lang="xx">bla bla bla bla</p> 
<p lang="xy">yada yada yada</p> 
<p lang="xx">bla bla bla bla</p> 
<p lang="xy">yada yada yada</p> 
<p lang="xx">bla bla bla bla</p> 
<p lang="xy">yada yada yada</p> 

我想語言之間切換屬性。我以爲做這樣的事情：

<label for="language">Language:</label> 
<input type="radio" name="language" value="xy" oninput="changeLanguage(this.value);" checked /> xy 
<input type="radio" name="language" value="xx" oninput="changeLanguage(this.value);" /> xx 

隱藏與CSS的語言之一：

<style> 
    [lang=xx] { display: none;} 
</style> 

，做的觸發與JS：

<script> 
    var language = document.getElementsByName('language'); 
    function changeLanguage(val) { 
    language.value = val; 
    if (val = "xx") { 
     document.write (
     "<style>" + 
      "[lang=xx] {display: block;}" + 
      "[lang=xy] {display: none;}" + 
     "</style>"); 
    } 
    if (val = "xy") { 
     document.write (
     "<style>" + 
      "[lang=xy] {display: block;}" + 
      "[lang=xx] {display: none;}" + 
     "</style>"); 
     }         
    } 
    </script> 

它不工作：單擊單選按鈕只是空的屏幕。我在這裏錯過了什麼？

Answer 1

document.write不適用於您正在嘗試做的事情。一類屬性添加到您的所有段落元素：

<p class="langitem" lang="xx">bla bla bla bla</p> 
<p class="langitem" lang="xy">yada yada yada</p> 
<p class="langitem" lang="xx">bla bla bla bla</p> 
<p class="langitem" lang="xy">yada yada yada</p> 
<p class="langitem" lang="xx">bla bla bla bla</p> 
<p class="langitem" lang="xy">yada yada yada</p> 
<p class="langitem" lang="xx">bla bla bla bla</p> 
<p class="langitem" lang="xy">yada yada yada</p> 

，然後恰克你的腳本是：

<script> 
var language = document.getElementsByName('language'); 
function changeLanguage(val) { 
    language.value = val; 

    var arr_elms = []; 
    arr_elms = document.getElementsByClassName("langitem"); 
    for (var i = 0; i < arr_elms.length; i++) { 
     if(arr_elms[i].getAttribute("lang") == val) 
      arr_elms[i].style.display = 'block'; 
     else 
      arr_elms[i].style.display = 'none'; 
    } 
} 
</script> 

，當你期待應該工作。