元素與顯示器設置爲none顯示

Question

我已經創建瞭如下的Greasemonkey腳本的Firefox幫助在Java API reference一長串過濾器類名稱：

// ==UserScript== 
// @name  JDK API Doc helper problematic 
// @version  1 
// @namespace Xolve 
// @description Provides in place search for JDK API docs 
// @include  http://docs.oracle.com/javase/7/docs/api/* 
// @run-at document-end 
// ==/UserScript== 

var classNamesFrame; 
var classNamesDoc; 
var classNamesHash = {}; 
var timeoutId; 

function textBoxTextChanged(ev) 
{ 
    window.clearTimeout(timeoutId); 
    console.log(ev.target.value); 
    // For case insensitive comparision 
    var query = String(ev.target.value).trim().toLowerCase(); 
    timeoutId = window.setTimeout(filterClassNames, 600, query); 

} 

function filterClassNames(query) 
{ 
    if(query.length == 0) { 
     for(k in classNamesHash) { 
      classNamesHash[k].style.display = ""; 
     } 
     return; 
    } 
    for(k in classNamesHash) { 
     if(k.startsWith(query)) { 
      console.log("setting to display: " + k); 
      classNamesHash[k].style.display = "block"; 
     } 
     else { 
      classNamesHash[k].style.display = "none"; 
     } 
    } 
} 

function init() 
{ 
    // Find list of class names 
    classNamesDoc = classNamesFrame.contentDocument; 
    classNamesATags = classNamesDoc.getElementsByTagName("a"); 
    for(i = 0; i < classNamesATags.length; i++) { 
     // For case insensitive comparision 
     classNamesHash[classNamesATags[i].textContent.toLowerCase()] = classNamesATags[i]; 
    } 

    // Add a text box 
    var textBox = classNamesDoc.createElement("input"); 
    var body = classNamesDoc.getElementsByTagName("body")[0]; 
    var classListNode = body.getElementsByClassName("indexContainer")[0]; 
    body.insertBefore(textBox, classListNode); 
    textBox.addEventListener("keyup", textBoxTextChanged); 
} 

classNamesFrame = document.getElementsByName("packageFrame")[0]; 
classNamesFrame.onload = init; 

這是這個腳本的作用

1. 將文本框添加到列出類名稱的框架中。呼叫是查詢框。

2. 創建所有類名（轉換爲小寫）到相應DOM元素的散列。

3. 當用戶在查詢框中輸入類名的前幾個字符時，它循環遍歷哈希鍵，並將匹配元素的顯示屬性設置爲「block」並將不匹配元素的屬性顯示爲「none」

問題

一些元件總是顯示例如AclEntry，Array等，不管查詢框的內容如何，​​

Answer 1

這是因爲有多個「AclEntry」鏈接，例如。所以，當你第一次添加元素到你的classNamesHash數組時，它會覆蓋第一個「AclEntry」鏈接，因爲你使用的ID是相同的。

你需要附加一些獨特的東西給這個ID，然後因爲你只檢查.startsWith匹配它應該仍然工作得很好。

例如：

for(i = 0; i < classNamesATags.length; i++) { 
    // For case insensitive comparision 
    classNamesHash[classNamesATags[i].textContent.toLowerCase() + '_' + i] = classNamesATags[i]; 
} 

這將追加_＃到數組裏面的ID的末端，應該讓他們唯一的，這樣你將有AclEntry_34和AclEntry_35或類似的東西。當您嘗試過濾出Acl *時，它將匹配它們兩個。

相反，所有的鏈接現在將在classNamesHash對象，以便所有不匹配的鏈接可以被隱藏。