Альтернатива использованию onfocus на div для изменения границы

Question

Когда пользователь нажимает на один из этих элементов, я хочу сделать 2 вещи:

1. Показать содержимое div в div #bigScreen
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>

Вот более полная версия, но jsfiddle не запустит ее правильно, потому что JavaScript должен загружаться после HTML. Не уверен, как это указать в jfiddle.

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

Answer 1

Я обновил ваш 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Это первая строка. Это имеет некоторые последствия, одним из которых является..
• Ни одна из ваших функций не является глобальной, они существуют в области закрытия load только событие, что означает...
• Вам нужно прикрепить обработчики событий в DOM, а не добавлять onclick атрибуты, но, на самом деле, вы должны делать это так или иначе. Я использовал addEventListener для этого, обратите внимание, что это не будет работать в старых IE, вы также можете прикрепить как newPreviewPanelEntry.onclick = showIt но это допускает только одного прослушивателя событий на узел.
• Вы не создали ни одной из ваших глобальных переменных, таких как previewPanel а также bigScreenтак что я добавил в коде для этого.
• Там нет реальной необходимости добавлять onclick слушатель каждого элемента в вашем массиве, просто добавьте слушатель к previewPanel, событие будет пузыриться. Вы можете увидеть это работает здесь. Основная хитрость этого подхода состоит в том, чтобы убедиться, что вы обрабатываете событие для интересующего вас элемента. Например, если вы добавляете дополнительные дочерние элементы в ваши интерактивные узлы, каждый из этих дочерних элементов может вызвать событие click. В этом случае, в дополнение к проверке, которую я использовал, вам, вероятно, следует проверить, что event.target имеет id определены.
• Я создал версию, в которой реализованы ваши следующие и предыдущие ссылки, опять же основной трюк заключается в добавлении обработчиков внутри onload закрытие, а не как attrubutes.

Answer 2

Если вы создаете якорную ссылку вокруг объекта, она должна быть фокусируемой / с возможностью табуляции...

пример:

<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 (нажмите один раз)
OnMouseDown (половина клика)
OnMouseUp (отпустить клик)
OnFocus вы уже знаете
OnBlur (антифокус)

Если вы хотите переключить DIV между двумя стилями, вам будет проще сделать это с помощью 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>