テーブルに埋め込まれている選択したリンクの色を変更する

StackOverflow https://stackoverflow.com/questions/256093

  •  05-07-2019
  •  | 
  •  

質問

リンクの選択後にクラス名を使用してリンクの色を変更しようとしているため、リンクは新しい色のままになりますが、別のリンクが選択されてから元に戻ります。

Martin Koolがに投稿したこのコードを使用していますこれの質問：

<html>     
<head>
<script>
  document.onclick = function(evt) {
    var el = window.event? event.srcElement : evt.target;
    if (el && el.className == "unselected") {
      el.className = "selected";
      var siblings = el.parentNode.childNodes;
      for (var i = 0, l = siblings.length; i < l; i++) {
        var sib = siblings[i];
        if (sib != el && sib.className == "selected")
          sib.className = "unselected";
      }
    }
  }
</script>
<style>
  .selected { background: #f00; }
</style>
</head>
 <body>
   <a href="#" class="selected">One</a> 
    <a href="#" class="unselected">Two</a> 
    <a href="#" class="unselected">Three</a>
  </body>

テーブル内のリンクを削除するまで、問題なく動作します。どうしてこれなの？簡単に、私は初心者です。

エラーはありません。リンクは<！> quot; selected <！> quot;に変わります。クラスですが、別のリンクが選択されると、古いリンクは<！> quot; selected <！> quot;を保持します。クラスを<！> quot; unselected <！> quot;に変更する代わりに。基本的に、私が知る限り、それはvlink属性のように機能していますが、これは私が意図しているものではありません。

そして、はい、リンクはすべて異なるセルにあります。正しく動作するようにコードを変更することをどのように提案しますか？

OK、実際、話が早すぎた。

document.onclick = function(evt)
{
var el = window.event? event.srcElement : evt.target;
if (el && el.className == 'unselected')
{
    var links = document.getElementsByTagName('a');
    for (var i = links.length - 1; i >= 0; i--)
    {
            if (links[i].className == 'selected')
                    links[i].className = 'unselected';
    }
    el.className = 'selected';
}

return false;
}

あなたが私に与えたこのコードは、視覚的に素晴らしい働きをし、私がやりたいことを正確に行います。ただし、リンクが機能しなくなります。リンクの色は変わりますが、何にもリンクできず、スクリプトを削除すると正常に機能します。私は何を間違えていますか/この機能を使用するには何を変更する必要がありますか？

また、私のウェブサイトのどこかで同じことをしたいのですが、リンクはすべて<div>タグで区切られ、<p>タグで区切られています。この作業を行うにはどうすればよいですか

役に立ちましたか？

解決

兄弟をループしています。リンクが個別の<td>にある場合、それらは兄弟ではなくなります。

次のようなすべてのリンクをループできます：

document.onclick = function(evt)
{
    var el = window.event? event.srcElement : evt.target;
    if (el && el.className == 'unselected')
    {
        var links = document.getElementsByTagName('a');
        for (var i = links.length - 1; i >= 0; i--)
        {
            if (links[i].className == 'selected')
                links[i].className = 'unselected';
        }
        el.className = 'selected';
    }

    return false;
}

「＃」への移動を停止するために、関数の最後にreturn false;も追加しました

他のヒント

エラーはありますか、それとも何も起こりませんか？ JavaScript初心者の場合の最初の良いステップは、Firebugなどのツールを使用して詳細なエラーメッセージを表示することです。console.logステートメントに追加して、コードの実行中に何が起こっているかを確認できます。

By <！>＃8216; in tables <！>＃8217;各リンクを独自のセルに入れることを意味しますか？それは次の行になるからです：

var siblings = el.parentNode.childNodes;

セル外の他のリンクを選択できません。どの要素がリンクコンテナであるかを示す別の方法を見つける必要があります。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top