可點擊的div JavaScript編程
[英]clickable div javascript programming
問題描述
我有5個div，我希望它們每個都是可點擊的，並在div中“新建”更改背景和內容
<div class="new"><b></b> <button id="btn">Przeczytaj Artykułt</button> <div class="card" id="pierwszy"><img src="img/slajd1.png"></div> <div id="next">⟩</div> <div id="prev">⟨</div> <div id="slider"></div> </div> <div class="dol"> <div class="card" id="pierwsz"><img src="slajdy/slajd1.png"></div> <div class="card" id="drugi"><img src="slajdy/slajd2.png"></div> <div class="card" id="trzeci"><img src="slajdy/slajd3.png"></div> <div class="card" id="czwarty"><img src="slajdy/slajd4.png"></div> <div class="card" id="piaty"><img src="slajdy/slajd5.png"></div> </div>
2 個解決方案
解決方案1
2 2017-12-07 20:56:16
首先，您似乎有一個.card元素不與其他元素一起使用。 我假設您只想在單擊其他五個.card元素中的任何一個時才更新.new ，因此出於示例的目的，我刪除了該元素。 如果需要，您始終可以將.dol > card用作選擇器：)
假設您要在使用類card單擊任何元素時更改.new的背景，首先要做的是使用類card收集所有元素，這可以通過document.getElementsByClassName('card') 。
您還需要使用document.getElementsByClassName('new')[0]定義目標.new元素。 注意選擇器末尾的[0] ，表示我們想要第一個結果。 這很重要，因為document.getElementsByClassName()返回一個NodeList元素集合，即使只有一個結果，我們也需要明確聲明要使用該結果。
現在，您已經定義了卡片和目標，接下來您將要遍歷每個卡片元素，並將onclick事件處理程序附加到每個元素。 for循環將for (var i = 0; i < cards.length; i++) ，並且將在處理程序中添加cards[i].onclick = function() { } 。
對於每個卡片元素，您都需要修改style.background來更改背景顏色，並修改.innerHTML來更改內容。
函數結尾的方括號和i是立即調用的函數表達式（IIFE） ，該表達式在頁面加載后立即運行。 需要附加事件處理程序。
可以在以下內容中看到：
var cards = document.getElementsByClassName('card'); var newElement = document.getElementsByClassName('new')[0]; for (var i = 0; i < cards.length; i++)(function(i) { cards[i].onclick = function() { newElement.style.background = 'red'; newElement.innerHTML = 'modified'; } })(i);
<div class="new"><b></b> <button id="btn">Przeczytaj Artykułt</button> <div id="next">⟩</div> <div id="prev">⟨</div> <div id="slider"></div> </div> <div class="dol"> <div class="card" id="pierwsz"><img src="slajdy/slajd1.png"></div> <div class="card" id="drugi"><img src="slajdy/slajd2.png"></div> <div class="card" id="trzeci"><img src="slajdy/slajd3.png"></div> <div class="card" id="czwarty"><img src="slajdy/slajd4.png"></div> <div class="card" id="piaty"><img src="slajdy/slajd5.png"></div> </div>
希望這可以幫助！ :)
解決方案2
0 2017-12-07 21:13:12
這可以做到
function ChangeBackground(incomingDiv) { incomingDiv.style.background = "green"; incomingDiv.innerHTML = "the original text wasn't good enough"; }
<html lang="en"> <head> <title>Document</title> </head> <body> <div id="div1" onclick="ChangeBackground(this);">blah blah blah</div> <div id="div2" onclick="ChangeBackground(this);">bleh bleh bleh</div> <div id="div3" onclick="ChangeBackground(this);">blue blue blue</div> </body> </html>
此方法也有效，並且顯示了如何區分元素
function ChangeBackground(incomingDivId) { var theclickeddiv = document.getElementById(incomingDivId); switch (incomingDivId) { case "div1": theclickeddiv.style.background = "green"; theclickeddiv.innerHTML = "new text for div1" break; case "div2": theclickeddiv.style.background = "orange"; theclickeddiv.innerHTML = "new text for div2" break; case "div3": theclickeddiv.style.background = "purple"; theclickeddiv.innerHTML = "new text for div3" break; default: break; } }
<div id="div1" onclick="ChangeBackground(this.id);">blah blah blah</div> <div id="div2" onclick="ChangeBackground(this.id);">bleh bleh bleh</div> <div id="div3" onclick="ChangeBackground(this.id);">blue blue blue</div>
使一個div可點擊和一個JavaScript以運行一些不同的鏈接
[英]Making a div clickable and a javascript to run some different link
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.