使用javascript更改元素的类别

Question

我很难根据select标记中的选定项目更改元素的类别。这是我的代码：

<table> 
    <tr> 
     <select onchange="wow(this.value)"> 
      <option value="a">a</option> 
      <option value="b">b</option>    
     </select> 
    </tr>    
    <tr id="x" class="show"> 
     x 
    </tr> 
</table> 

<script> 
function wow(value){ 
    switch(value){ 
     case "a": document.getElementById("x").className = "show"; break;  
     case "b": document.getElementById("x").className = "hide"; break; 
    } 
} 
</script> 

<style> 
.show{ 
    display:inline-block; 
} 

.hide{ 
    display:none; 
} 
</style> 

我这里看不到任何问题。我也试过setAttribute("class", "show")，但不起作用。

Answer 1

你有一个<td>包X：

http://jsfiddle.net/DerekL/CVxP7/

<tr>...<td id="x" class="show">x</td></tr> 

你也需要在前面加case"a":

case "a": 
    document.getElementById("x").setAttribute("class", "show"); 
    break; 

---

PS：有一个更高效的w唉，实现你正试图在这里做的事：

http://jsfiddle.net/DerekL/CVxP7/2/

function wow(value) { 
    var index = { 
     a: "show", 
     b: "hide" 
    }; 
    document.getElementById("x").setAttribute("class", index[value]); 
} 

现在你不需要输入document.getElementById("x").setAttribute("class"...两次。

Answer 2

试试这个

switch(value){ 
    case "a": document.getElementById("x").setAttribute("class", show); break;   
    case "b": document.getElementById("x").setAttribute("class", hide); break; 
}