通过JS更改HTML标识

我有一个由“hello world”和“hello”和“world”组成的脚本有两种不同的CSS样式。通过JS更改HTML标识

我想单击其中任何一个，他们会交换他们的样式。例子是我点击“你好”，它会交换风格与“世界”。以下是我的代码。

我无法让它交换。我应该如何改正它？

<html> 
<head> 
<style> 
#today{ 
    font-weight: bold; 
    color: red; 
} 

#normal{ 
    font-weight: normal; 
    color: green; 
} 
</style> 
<script> 
    old="old"; 

     function set(in){ 
      var e = document.getElementsByName(old); 
      for(ii=0;ii<e.length; ii++) 
      { 
       var obj = document.getElementsByName(old).item(ii); 
       obj.id="normal"; 
      } 
      old=in; 
    var e = document.getElementsByName(old); 
      for(ii=0;ii<e.length; ii++) 
      { 
       var obj = document.getElementsByName(old).item(ii); 
       obj.id="today"; 
      } 
     } 
</script> 
</head> 
<body> 
<table> 
    <tr> 
     <td id="normal" name="new" onclick="set('new')">Hello</td> 
     <td id="today" name="old" onclick="set('old')">World</td> 
    </tr> 
</table> 
</body> 
</html>

来源

2011-10-29 thotheolh

我不知道， “名” 是真的有效''元素的属性。你可以使用非标准的属性，他们会经常甚至通常工作，但有点可疑。 – Pointy

这里有几个问题。首先，在你的onclick处理程序中，它必须是“javascript：set”而不是“set”。其次，你有一个名为“in”的参数，它是一个Javascript关键字。将其所有引用更改为“inv”。如果你这样做，你的代码将会分类。尝试一下。

除此之外，我建议你在Firefox中工作，并获取Firebug插件，以便打开控制台。它会告诉你这些类型的错误。

来源

2011-10-29 11:17:07 dnuttle

但是，要做你以后的事情，你不应该交换ID。相反，你应该努力交换课程。应该使用ID为给定的DOM元素建立永久标识。直接使用JavaScript交换类有点棘手，但如果使用jQuery则很容易。 – dnuttle

感谢您的意见。 – thotheolh

在任何时候，只有一个元素可以使用ID进行注释。因此，您应该使用类而不是ID来注释元素。另外，请确保包含文档类型。

校正码的Live demo：

当然，它的方式更容易jQuery（demo）写：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"> 
</script> 
<script> 
$(function() { 
    $('.normal,.today').click(function() { 
    $('.normal,.today').each(function(i, el) { 
     var $el = $(el); 
     if ($el.hasClass('today')) { 
     $el.removeClass('today'); 
     $el.addClass('normal'); 
     } else { 
     $el.removeClass('normal'); 
     $el.addClass('today'); 
     } 
    }); 
    }); 
}); 
</script>

来源

2011-10-29 11:29:53 phihag

您通常希望将所有的JavaScript代码放入一个立即调用的函数表达式中：'（function（）{/ *所有代码都在这里* /}）;'输入一个局部范围并因此防止全局名称空间污染... –

@ ŠimeVidas在jQuery版本中已经做到了这一点，并且在普通的JavaScript中也加入了这一点。 – phihag

感谢有关使用课程的进展。这似乎是通过类更优雅的方法。 – thotheolh

通过JS更改HTML标识

回答

相关问题