JSからのHTML IDの変更

「hello world」と「hello」と「world」からなるスクリプトは2つの異なるCSSスタイルになっています。JSからのHTML IDの変更

私はどちらかをクリックしたいと思うので、彼らは彼らのスタイルを交換します。たとえば、「hello」をクリックすると、「world」とスタイルが入れ替わります。以下は私のコードです。

スワップできませんでした。どうすれば修正できますか？

<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ハンドラでは、単に "set"ではなく "javascript：set"でなければなりません。次に、Javascriptキーワードである "in"という名前のパラメータがあります。それのすべての参照を "inv"に変更します。そうするならば、あなたのコードは仕事の並べ替えになります。それを試してみてください。

さらに、Firefoxで作業してFirebugアドインを入手して、コンソールを開くことをお勧めします。この種のエラーが表示されます。

出典

2011-10-29 11:17:07 dnuttle

しかし、あなたがしていることをするには、IDを入れ替えてはいけません。代わりに、クラスを交換する必要があります。 IDは、特定のDOM要素の永続的なIDを確立するために使用する必要があります。クラスをスワップすることはJavascriptではやや難解ですが、jQueryを使用すると非常に簡単です。 – dnuttle

アドバイスをいただきありがとうございます。 – thotheolh

いつでも、1つの要素にIDを付けることができます。したがって、IDの代わりにクラスを使用して要素に注釈を付ける必要があります。また、doctypeを必ず含めてください。修正されたコードの

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

'（function（）{/ * all code here * /}）;'ローカルスコープを入力してグローバルな名前空間汚染を防ぐために、即座に呼び出される関数式の中にすべてのJavaScriptコードを入れたいと思う... –

@ ŠimeVidasすでにjQueryバージョンでこれを行っていますが、これも通常のJavaScriptでも追加されています。 – phihag

クラスの使い方を教えてくれてありがとう。それはクラスを介してよりエレガントなアプローチであるようです。 – thotheolh

JSからのHTML IDの変更

答えて

関連する問題