2012-08-02 92 views
0

當我嘗試更新變量「a」中的值到標籤標籤的類屬性時,我的代碼中存在一個小問題。誰能幫我嗎。這裏是我的代碼變量中的值未在標籤標籤中更新

<html> 
<head> 
<style> 
label.visible {visibility:visible} 
label.hidden {visibility:hidden} 
</style> 
<script type="text/javascript"> 
var a; 
function doset() 
{ 
a="hidden"; 
alert(a); 
return a; 
} 
</script> 
</head> 
<body> 
<form> 
<label class=visible>Hello</label> 
<button onclick="doset()">v</button><br> 
<label class=a>Hello1</label><br> 
<label class=a>Hello2</label><br> 
<label class=a>Hello3</label><br> 
<label class=a>Hello4</label><br> 
<label class=a>Hello5</label><br> 
</form> 
</body> 
</html> 

這裏是小提琴:http://jsfiddle.net/M8CXN/

+0

我不確定你想達到什麼。你所做的只是覆蓋一個全局變量,而不是改變一個元素的類 - 那是你想要做什麼? – Utkanos 2012-08-02 10:31:33

+0

關於你的html,請把你的類名加引號。 – 2012-08-02 10:32:36

+0

提醒並返回「隱藏」你想用這個值做什麼?你也應該'onclick =「doset();返回false;」'以防止重新加載頁面 – 2012-08-02 10:32:52

回答

1

class=a

這並不綁定類名的javascript全局變量a;在不同的情況下它們是不同的東西。

如果你想操縱類,你必須通過DOM來實現。最簡單的方法是使用容器;

<div id="myItems"> 
    <label>Hello1</label><br> 
    <label>Hello2</label><br> 
    ... 

function doset() { 
    a="hidden"; 
    document.getElementById("myItems").style.visibility = a; 
    alert(a); 
} 

<button onclick="doset(); return false;">v</button><br> 
0

如果你把所有的相關標籤同一類:

<label class="myclass">Hello1</label><br> 
<label class="myclass">Hello2</label><br> 
<label class="myclass">Hello3</label><br> 

然後,您可以針對這些添加或刪除類你想:

$('.myclass').addClass('hidden'); 
$('.myclass').removeClass('hidden'); 

或者只是:

$('.myclass').hide(); 
$('.myclass').show(); 

(使用jQuery

+0

問題沒有被標記爲jQuery。 – Jamiec 2012-08-02 10:39:05

+0

沒有。這是一個非常有用的DOM庫操作,雖然:) – Flash 2012-08-02 10:44:30

+0

這是,但如果問題沒有標記jQuery你不應該給一個jQuery的答案。只是我的$ 0.02 – Jamiec 2012-08-02 11:20:31

0
<html> 
<head> 
<style> 
label.visible {visibility:visible} 
label.hidden {visibility:hidden} 
</style> 
<script type="text/javascript"> 

function setLabelsClass(){ 
    var form = document.getElementsByTagName('form'); 
    var labels = form[0].getElementsByTagName('label'); 
    for(var i=0,len=labels.length;i<len;i++){ 
     var lbl_class = labels[i].getAttribute('class'); 
     if(lbl_class==="") labels[i].setAttribute('class','hidden'); 
    } 
} 
</script> 
</head> 
<body> 
<form> 
<label class=visible>Hello</label> 
<button onclick="setLabelsClass(); return false;">v</button><br> 
<label>Hello1</label><br> 
<label class="">Hello2</label><br> 
<label class="">Hello3</label><br> 
<label class="">Hello4</label><br> 
<label class="">Hello5</label><br> 
</form> 
</body> 
</html>​ 

不是一個好方法叫做畢竟,如果你不提供AJAX,因爲你的形式已經不提交。 第二次想到我有這種感覺,你可能不明白我在這裏談論的是什麼,但你會做到的。