ボーダーを変更するためにdivにonfocusを使用する方法

ユーザーがこれらのdivのいずれかをクリックすると、2つのことをしたい:

  1. divのコンテンツをdiv #bigScreenに表示する
  2. 境界線をクリックした小さな区画を強調表示します。彼らが何か他のものをクリックすると、私は国境を元の状態に戻したい。

ボーダーをオンにしてもそれをオフにすることはできません。以下の例を参照してください。

<div id="2" class="previewPanelEntry" onclick="showIt(this.id)">2</div>

<script>
function showIt(id){
  /*-- onclick find all items highlighted and unhighlight them so there is only one selected --*/
  var highlighted = document.getElementsByClassName('highlighted');
  for (var d in highlighted) {
    /*-- THIS IS WHAT DOESNT WORK --*/
    d.className = "previewPanelEntry";
  }

  /*-- put contents of most recently selected div on the big screen --*/
  bigScreen.innerHTML = selection[id];

  /*-- highlight the most recently selected div --*/
  document.getElementById(id).className ="highlighted";

}
</script>

Heresより完全なバージョンですが、javascriptはHTMLの後にロードする必要があるので、jsfiddleはそれを正しく実行しません。これをjfiddleでどのように指定するかはわかりません。

http://jsfiddle.net/94zk7/2/

0
わたし。元の投稿を編集しました。私の最初の行のdivを見てください。
追加された 著者 Jonathan Eckman,
ユーザーが div をクリックするようにするには、 onclick を使用していないのはなぜですか?
追加された 著者 robertc,

2 答え

あなたのjsFiddleを更新して、あなたが望む通りに動作するようにします。ここにコードがあります:

window.onload=function(){
    var previewPanel = document.getElementById('previewPanel');
    var selection = ["a", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "z"];
    for (var c in selection) {
        var newPreviewPanelEntry = document.createElement('div');
        newPreviewPanelEntry.id = c;
        newPreviewPanelEntry.className = "previewPanelEntry";
        newPreviewPanelEntry.addEventListener('click',showIt);
        newPreviewPanelEntry.innerHTML = "selection[" + c + "]";
        previewPanel.appendChild(newPreviewPanelEntry);
    }
    var newClear = document.createElement('div');
    newClear.className = "clear";
    previewPanel.appendChild(newClear);

    function showIt(event) {
        var siblings = event.target.parentNode.children;
        for (var i=0; i

注意すべき事項

  • jsFiddleはすべてをウィンドウ load イベントで呼び出される関数にラップします。これが最初の行です。これにはいくつかの結果がありますが、その1つは..
  • あなたの関数はどれもグローバルではなく、 load イベントのクロージャスコープ内に存在します。つまり、...
  • onclick 属性を追加するのではなく、DOMにイベントハンドラをアタッチする必要がありますが、実際にはそのようにする必要があります。私はこのために addEventListener を使用しましたが、このは動作しません古いIE の場合、 newPreviewPanelEntry.onclick = showIt のようにアタッチすることもできますが、これはノードごとに1つのイベントリスナーのみを許可します。
  • previewPanel bigScreen などのグローバル変数を作成していないので、そのコードを追加しました。
  • 配列のすべての要素に onclick リスナーを追加する必要はありません。リスナーを previewPanel に追加するだけでイベントがバブルアップします。 ここで働いていることをご覧ください。このアプローチの主なやり方は、興味のある要素のイベントを処理していることを確認することです。たとえば、クリック可能なノードに子要素を追加すると、その子要素のそれぞれがclickイベントをトリガーできます。この場合、使用したチェックに加えて、 event.target id が定義されていることを確認する必要があります。
  • あなたの次と前のリンクを実装したバージョンを作成しました。もう一度主なやり方は、ハンドラはattrubutesではなく onload クロージャ内にあります。
2
追加された
わぁ、ありがとう。あなたは私の質問、私の余分なクレジットjsfiddleの質問に答え、私は質問しませんでした。私はあなたに3つのチェックマークを与えることを願っています。
追加された 著者 Jonathan Eckman,

オブジェクトの周りにアンカーリンクを作成する場合は、フォーカス/タブ可能でなければなりません...

例:

I can't tab to this text

But I can tab to this text

私はしばらくの間はHTMLをやっていませんが、DIVで試してみてください。そうでなければSPANのようなものでそれを行い、CSSプロパティを編集してDIV(つまり display:ブロック; )。

興味のあるイベント:
OnMouseOver(オブジェクト上にマウスを置く)
OnMouseOut(マウスはオブジェクトを離します)
OnClick(一回クリック)
OnMouseDown(半クリック)
OnMouseUp(リリースクリック)
あなたがすでに知っているOnFocus OnBlur(アンチフォーカス)

2つのスタイルの間でDIVを切り替えるには、CSSで簡単にDIVを行い、オブジェクトのクラスフィールドを変更するだけです。

例:

//style
...
.div-off {
   border: 1px solid black; 
}
.div-on {
   border: 1px solid #BBDDFF;
   background-color: #CCCCFF;
}
...
//script
...
divList = new Array() {"div1","div2","div3"};
function switchStyle(obj) {
    for (i=0; i<divList.length; i++)
        document.getElementById(divList[i]).className = "div-off";
    obj.className = "div-on";
}
...
//html
<div id="div1" class="div-off" onClick=switchStyle(this);>div1</div>
<div id="div2" class="div-off" onClick=switchStyle(this);>div2</div>
<div id="div3" class="div-off" onClick=switchStyle(this);>div3</div>
0
追加された
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript