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

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

0 голосов
/ 19 декабря 2011

Когда пользователь нажимает на один из этих div, я хочу, чтобы он делал 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 не запустит ее правильно, потому что после HTML нужно загрузить javascript.Не уверен, как указать это в jfiddle.

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

Ответы [ 2 ]

2 голосов
/ 19 декабря 2011

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

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

пример: 

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