javascript - 替代在 div 上使用 onfocus 来更改边框

Question

当用户点击这些 div 之一时，我希望它做两件事:

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>

这是一个更完整的版本，但 jsfiddle 无法正确运行它，因为 javascript 需要在 html 之后加载。不确定如何在 jfiddle 中指定它。

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

Answer 1

我已经 updated your 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 将所有内容包装到一个函数中，该函数在 window 的 load 事件中调用，这就是第一行。这会产生一些后果，其中之一是..
• 您的函数都不是全局函数，它们仅存在于 load 事件的闭包范围内，这意味着...
• 您需要在 DOM 中附加事件处理程序，而不是通过添加 onclick 属性，但实际上，无论如何您都应该这样做。为此，我使用了 addEventListener，注意这个 won't work in older IE ，您也可以像 newPreviewPanelEntry.onclick = showIt 那样附加，但这只允许每个节点有一个事件监听器。
• 您还没有创建任何全局变量，例如 previewPanel 和 bigScreen，所以我为此添加了代码。
• 没有必要为数组中的每个元素都添加一个onclick 监听器，只需将监听器添加到previewPanel，事件就会冒泡。你可以see this working here .这种方法的主要技巧是确保您正在处理您感兴趣的元素的事件。例如，如果您向可点击节点添加更多子元素，那么这些子元素中的每一个都可以触发点击事件。在这种情况下，除了我使用的检查之外，您可能还应该检查 event.target 是否定义了 id。
• 我创建了一个版本 implemented your next and previous links ，主要技巧还是在 onload 闭包中添加处理程序，而不是作为属性。