0

ユーザーがこれらの div の 1 つをクリックすると、次の 2 つのことを行う必要があります。

  1. div #bigScreen に div の内容を表示します
  2. クリックした小さな div を境界線で強調表示します。彼らが何か他のものをクリックしたら、境界線を元の状態に戻したい.

境界線をオンにすることはできますが、オフにすることはできません。以下の例を参照してください。

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

より完全なバージョンを次に示しますが、html の後に JavaScript をロードする必要があるため、jsfiddle は正しく実行されません。これを jfiddle で指定する方法がわかりません。

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

4

2 に答える 2

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<siblings.length; i++) {
            siblings[i].style.border = "";
        }
        event.target.style.border = "1px solid red";
        var bigScreen = document.getElementById('bigScreen');
        bigScreen.innerHTML = event.target.innerHTML;
    }
}

注意すべき点：

  • jsFiddleは、のloadイベントで呼び出される関数にすべてをラップしますwindow。これが最初の行です。これにはいくつかの結果があり、そのうちの1つは..
  • どの関数もグローバルではなく、イベントのクロージャスコープ内にloadのみ存在します。つまり...
  • 属性を追加するのではなく、DOMでイベントハンドラーをアタッチする必要がありますonclickが、実際には、とにかくそのようにする必要があります。私はこれに使用しました。これは古いIEでは機能しないaddEventListenerことに注意してください。同様にアタッチすることもできますが、これはノードごとに1つのイベントリスナーのみを許可します。newPreviewPanelEntry.onclick = showIt
  • previewPanelやのようなグローバル変数を作成していなかったbigScreenので、そのためのコードを追加しました。
  • 配列内のすべての要素にリスナーを追加する必要はありません。onclickリスナーを追加するだけpreviewPanelで、イベントがバブルアップします。これがここで機能しているのを見ることができます。このアプローチの主な秘訣は、関心のある要素のイベントを確実に処理することです。たとえば、クリック可能なノードにさらに子要素を追加すると、それらの子要素のそれぞれがクリックイベントをトリガーできます。この場合、私が使用したチェックに加えて、おそらくevent.targetがid定義されていることをチェックする必要があります。
  • 次と前のリンクを実装したバージョンを作成しました。ここでも、主なトリックは、onload属性としてではなく、クロージャー内にハンドラーを追加することです。
于 2011-12-19T12:42:00.240 に答える
0

オブジェクトの周りにアンカーリンクを作成する場合は、フォーカス可能/タブ可能である必要があります...

例：

<p>I can't tab to this text</p>
<p><a href=#>But I can tab to this text</a></p>

私はしばらくHTMLを実行していませんが、それでもDIVで試してみてください。そうでない場合は、SPANなどの他の方法で実行してから、CSSプロパティを編集してDIVのように動作させることができます（つまりdisplay: block;）。

興味があるかもしれない他のいくつかのイベント：
OnMouseOver（マウスがオブジェクトの上にホバーする）
OnMouseOut（マウスがオブジェクトを離れる）
OnClick（1回クリック） OnMouseDown
（ハーフクリック）OnMouseUp（クリックを離す） OnFocusすでに知っている OnBlur（アンチフォーカス）


DIVを2つのスタイル間で切り替えたい場合は、CSSを使用して、オブジェクトのクラスフィールドのみを変更する方が簡単な場合があります。

例：

//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>
于 2011-12-19T03:46:24.453 に答える