变量中的值未在label标签中更新

时间:2012-08-02 10:28:41

标签: javascript html html5

当我尝试将变量“a”中的值更新为label标签的class属性时,我的代码中出现了一个小问题。谁能帮我吗。这是我的代码

<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/

3 个答案:

答案 0 :(得分: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>

答案 1 :(得分: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

答案 2 :(得分: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,那么毕竟不是一个好方法,因为您的表单不再提交。 第二个想法,我觉得你可能不明白我在这里谈论的是什么,但你会得到它。