的getElementById對多個ID

function show() { 
 
     if(document.getElementById('intake').style.display=='none') { 
 
      document.getElementById('intake').style.display='block'; 
 
     } 
 
     false; 
 
    } 
 
    function hide() { 
 
     if(document.getElementById('intake').style.display=='block') { 
 
      document.getElementById('intake').style.display='none'; 
 
     } 
 
     false; 
 
    }

<div id="opener"><a href="#1" name="1" onmouseover="show();" onclick="show();" onmouseout="hide();" >click here</a></div> 
 
    <div id="intake" style="display:none;">Text 
 
      <div id="upbutton"><a onmouseout="hide();">click here</a></div> 
 
    </div> 
 
    
 
    
 
<div id="opener"><a href="#1" name="2" onmouseover="show();" onclick="show();" onmouseout="hide();" >click here</a></div> 
 
    <div id="intake" style="display:none;">text 
 
      <div id="upbutton"><a onmouseout="hide();">click here</a></div> 
 
    </div>

我寫了兩個函數，我需要他們搶有史以來用戶點擊一下ID。並顯示該信息。我不想爲每個ID編寫不同的函數，因爲我有很多。有人可以請指出我在正確的方向。

function show() { 
 
     if(document.getElementById('this is where all of the divs would go i presume').style.display=='none') { 
 
      document.getElementById('this is where all of the divs would go i presume').style.display='block'; 
 
     } 
 
     false; 
 
    }

我只是想我會增加整個事情，以減輕任何混亂。

來源

2015-08-31 the_new_guy

要點擊它時獲取元素的ID？ –

我不明白你在問什麼。'getElementById'用於查找DOM中的唯一元素。如果你想同時抓一堆，可以使用其他函數，比如'getElementByClassName'或'querySelectorAll'。 –

只是一件事 - 你將如何點擊元素與顯示：無？ – sinisake

做這樣的事情：

<div onclick='show(this)'>click me</div> 

<script>  
    function show(element) { 
     if(element.style.display=='none') { 
      element.style.display='block'; 
     } 
     return false; 
    } 
</script>

來源

2015-08-31 18:58:26 lem2802

不要那樣做。單擊事件將包含一個指向在其上點擊發生的DOM對象：

https://api.jquery.com/event.target/

<script> 
$("body").click(function(event) { 
    $("#log").html("clicked: " + event.target.nodeName); 
}); 
</script>

這意味着有絕對沒有必要的ID分配給每個人的，所以您可以針對它點擊處理程序。

來源

2015-08-31 18:59:14

是不是假設他使用jQuery？ – Darren

是的，但jquery只是一個JS包裝。事件的東西在普通的JS中基本上是一樣的。 –

我仍然試圖弄清楚，我甚至沒有碰過JQuery，但 –

你可以使用jquery的類選擇器。 https://api.jquery.com/class-selector/

您可以將操作添加到具有相同類的元素。觸發該動作後，您可以使用關鍵字this來獲取元素的ID。

來源

2015-08-31 19:02:08

如果您知道該按鈕/鏈接/控件的ID，你可以傳遞到函數，就像這樣：

function show(id) { 
     if(document.getElementById(id).style.display=='none') { 
      document.getElementById(id).style.display='block'; 
     } 
     false; 
    }

如果您不能標識明確地傳遞到功能每一個按鈕，你可以找回動態使用是這樣的：

Getting the ID of the element that fired an event

來源

2015-08-31 19:04:05

的JavaScript：

function DivShow(elm) 
{ 
    if(elm.style.display=="block") {elm.style.display="none"}; 
} 

<div id="Div1" onclick="DivShow(this);" > Some stuff here </div> 
<div id="Div2" onclick="DivShow(this);" > Some Other stuff here </div>

如果你JQuery的加載中... 的Jquery：

function DivShow(elm) 
{ 
    if($(elm).css("display") =="block") {$(elm).css("display", "none")}; 
} 
<div id="Div1" onclick="DivShow(this);" > Some stuff here </div> 
<div id="Div2" onclick="DivShow(this);" > Some Other stuff here </div>

來源

2015-08-31 19:11:37 jon

所以我想通了，什麼是錯的我的腳本。我在減速我沒有把ID我改成了

function show(id) { 
 
     if(document.getElementById(id).style.display=='none') { 
 
      document.getElementById(id).style.display='block'; 
 
     } 
 
     false; 
 
    }

就像一個魅力

來源

2015-08-31 19:58:59

你需要的是一種叫做事件委託。怎麼運行的？我們來看看下面的html。

<p id="first">i am first</p> 
<p id="second">i am second</p> 

<hr/> 

<p class="hide-trigger" data-find="first">hide first</p> 
<p class="hide-trigger" data-find="second">hide second</p>

正如您所看到的，類「hide-trigger」有兩個元素。假設您想要使用第一個「隱藏觸發器」來隱藏第一段和第二個「隱藏觸發器」以對第二段執行相同的操作。

很明顯，你不想因爲想隱藏不同的元素而兩次編寫相同的邏輯。我們可以將要隱藏的元素的ID存儲在data attribute內。我選擇了data-find，但你可以選擇任何你想要的。這不是事件授權，順便說一下，這只是解決了數據傳輸的問題。另外，我會用下面的函數來隱藏要素：

function hide (element) { 
    if (window.getComputedStyle(element).display === 'block') { 
    element.style.display = 'none'; 
    } 
}

事件代表團中不重視對DOM中的各個元素的事件監聽器，而是對這些元素的父的技術。爲了簡單起見，我選擇了body標籤，但只要包含您感興趣的所有元素，DOM樹中的任何祖代元素都可以正常工作。當點擊發生時，事件將從「目標」（即被點擊的元素）向上「起泡」，直到它到達主體。在那裏你可以檢查你是否對被點擊的元素感興趣，如果你是，你可以做任何事情。在你的情況下，你想獲得隱藏元素的id並隱藏它。你可以這樣做。

document.body.addEventListener('click', function (e) { 
    var target = e.target; 

    // check if a 'hide-trigger' was clicked 
    if (target.classList.contains('hide-trigger')) { 

     var id = target.dataset['find']; 
     var element = document.getElementById(id); 
     hide(element); 

    } 

}, false);

要確保身體標記存在，你可以換裏面的一切：

document.addEventListener('DOMContentLoaded', function() { 
    // code goes here 
}, false);

瞭解更多：

來源

2015-08-31 19:59:06

您可以在大多數瀏覽器上緩存DOM查詢的結果以獲得性能優勢。

function show(id) { 
    var element = document.getElementById(id); 
    if(element.style.display=='none') { 
     element.style.display='block'; 
    } 
    return false; 
}

如果你想有一個功能，顯示一次多個元素，你可以結合使用CSS selector與document.querySelectorAll：

function showAll(selector) { 
    var elements = document.querySelectorAll(selector); 
    for(var i=0, len = els.length; i < len; i++){ 
     if(elements[i].style.display=='none') { 
      elements[i].style.display='block'; 
     } 
    } 
    return false; 
}

例如，showAll(".myclass");會顯示與類名的所有元素「MyClass的「，showAll("li");將顯示所有<li>元素，並且showAll("#intake");將顯示ID字段設置爲」攝入量「的所有元素。

看看下面的CSS選擇參考資料，以瞭解更多：

W3 Consortium
Mozilla Developers Reference
Microsoft's Guide to Understanding CSS Selectors
和當然，飽受詬病的W3Schools CSS Selectors Reference

來源

2015-08-31 20:21:33 Thriggle

的getElementById對多個ID

回答

相關問題