使用 JavaScript 更改元素的类

Question

我在更改基于选定项目的元素类方面遇到了困难，以下是我的代码：

：

<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") 但是不起作用。

- shankshera

---

@GlennFerrieLive 这是一个 jQuery 示例。 - Hamish

你缺少了 switch 语句中的 case 部分。 - j08691

Answer 1

你需要用 <td> 包裹 X：

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

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

此外，您必须在"a":前面添加case。

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

---

PS: 这里有一种更有效的方法来实现你尝试做的事情：

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"...。

- Derek 朕會功夫

---

可以了，谢谢！但是为什么我不能将类放在<tr>标签中呢？ - shankshera

@shankshera - 从技术上讲，你可以这样做，但是最好养成用<th>或者<td>来包装内容的良好习惯。 - Derek 朕會功夫

Answer 2

试试这个

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

- Devang Rathod

---

show 未定义。 - Derek 朕會功夫