可点击的div JavaScript编程
[英]clickable div javascript programming
问题描述
I have 5 divs and I want each of them to be clickable and change the background and content in the div "new" 
我有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
First, you appear to have one .card element that doesn't go with the others. 首先，您似乎有一个.card元素不与其他元素一起使用。 I'm assuming you want to only update .new when any of the other five .card elements are clicked, so for the purposes of my example, I've removed that element. 我假设您只想在单击其他五个.card元素中的任何一个时才更新.new ，因此出于示例的目的，我删除了该元素。 You can always use .dol > card as a selector if need be :) 如果需要，您始终可以将.dol > card用作选择器：)
Assuming you want to change the background of .new when you click on any element with the class card , what you'll want to do is first collect all of the elements with the class card , which can be done with document.getElementsByClassName('card') . 假设您要在使用类card单击任何元素时更改.new的背景，首先要做的是使用类card收集所有元素，这可以通过document.getElementsByClassName('card') 。
You'll also need to define the target .new element, with document.getElementsByClassName('new')[0] . 您还需要使用document.getElementsByClassName('new')[0]定义目标.new元素。 Note the [0] at the end of the selector, which indicates that we want the first result. 注意选择器末尾的[0] ，表示我们想要第一个结果。 This is important because document.getElementsByClassName() returns a NodeList collection of elements, and even if there is only one result, we need to explicitly state that we want to use that one. 这很重要，因为document.getElementsByClassName()返回一个NodeList元素集合，即使只有一个结果，我们也需要明确声明要使用该结果。
Now that you have both the cards and the target defined, you'll want to loop over each of the card elements, attaching an onclick event handler to each one. 现在，您已经定义了卡片和目标，接下来您将要遍历每个卡片元素，并将onclick事件处理程序附加到每个元素。 The for loop would be for (var i = 0; i < cards.length; i++) , and the handler would be added with cards[i].onclick = function() { } . for循环将for (var i = 0; i < cards.length; i++) ，并且将在处理程序中添加cards[i].onclick = function() { } 。
For each of the card elements, you want to modify the style.background of to change the background colour, and the .innerHTML to change the content. 对于每个卡片元素，您都需要修改style.background来更改背景颜色，并修改.innerHTML来更改内容。
The brackets and the i at the end of the function are an immediately-invoked function expression (IIFE) , which gets run as soon as the page is loaded. 函数结尾的方括号和i是立即调用的函数表达式（IIFE） ，该表达式在页面加载后立即运行。 This is needed to attach the event handlers. 需要附加事件处理程序。
This can be seen in the following: 可以在以下内容中看到：
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>
Hope this helps! 希望这可以帮助！ :) :)
解决方案2
0 2017-12-07 21:13:12
This can do it 这可以做到
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>
This method works too, and it shows how to discriminate between elements 此方法也有效，并且显示了如何区分元素
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.