切换语言的属性

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> 

，当你期待应该工作。