我有 4 个标记为 a1、a2、a3、a4 的框作为示例。当有人点击 2 个框时,我希望标签(以 a1、a2 为例)打印在 html 输出上。我只花了一个多小时,我能想到的最好的办法就是打印 undefined 和 null。
对不起,这是我的代码
HTML
<div class="container">
<div class="row">
<div class="col-md-3" label="a1">
<a class="btn btn-primary" href="#" role="button">Button 01</a>
<div class="output"></div>
</div>
<div class="col-md-3" label="a2">
<a class="btn btn-primary" href="#" role="button">Button 02</a>
<div class="output"></div>
</div>
<div class="col-md-3" label="a3">
<a class="btn btn-primary" href="#" role="button">Button 03</a>
<div class="output"></div>
</div>
<div class="col-md-3" label="a4">
<a class="btn btn-primary" href="#" role="button">Button 04</a>
<div class="output"></div>
</div>
</div>
</div>
const button = document.querySelector('.btn');
button.addEventListener('click', printLabel);
function printLabel(){
const name = document.querySelector('label');
const print = document.querySelector('.output');
print.innerText = name;
}
答案 0 :(得分:1)
label
实际上并不是 <div>
标签的标准属性。如果您只是在寻找快速解决方案,您可以尝试 id
。此外,您以一种非常奇怪的方式访问所有内容。
label
更改为 id
。 id
属性几乎适用于所有 HTML 元素(据我所知),并允许您唯一地标识该元素。<div class="container">
<div class="row">
<div class="col-md-3" id="a1">
<a class="btn btn-primary" href="#" role="button">Button 01</a>
<div class="output"></div>
</div>
<div class="col-md-3" id="a2">
<a class="btn btn-primary" href="#" role="button">Button 02</a>
<div class="output"></div>
</div>
<div class="col-md-3" id="a3">
<a class="btn btn-primary" href="#" role="button">Button 03</a>
<div class="output"></div>
</div>
<div class="col-md-3" id="a4">
<a class="btn btn-primary" href="#" role="button">Button 04</a>
<div class="output"></div>
</div>
</div>
</div>
id
元素添加一个唯一的 div
,这些元素是您的“输出”。这将允许您的代码将“输出”定向到正确的元素。<div class="container">
<div class="row">
<div class="col-md-3" id="a1">
<a class="btn btn-primary" href="#" role="button">Button 01</a>
<div class="output" id="a1-output"></div>
</div>
<div class="col-md-3" id="a2">
<a class="btn btn-primary" href="#" role="button">Button 02</a>
<div class="output" id="a2-output"></div>
</div>
<div class="col-md-3" id="a3">
<a class="btn btn-primary" href="#" role="button">Button 03</a>
<div class="output" id="a3-output"></div>
</div>
<div class="col-md-3" id="a4">
<a class="btn btn-primary" href="#" role="button">Button 04</a>
<div class="output" id="a4-output"></div>
</div>
</div>
</div>
document.querySelector('.btn')
更改为 document.querySelectorAll('.btn')
。这些方法之间的区别在于,第一个方法只选择它找到的第一个与选择器匹配的元素,而第二个方法选择所有与选择器匹配的元素并创建一个数组。接下来,我们遍历该数组,为每个元素添加一个事件侦听器。
之后,我们在 e
函数中添加一个参数 printLabel()
(用于事件),因为 addEventListener()
在回调函数(printLabel
)中传递了一个事件对象。此对象提供有关与事件相关的目标元素的信息。
接下来,我们获取事件的目标元素,这就是您的 button
。然后我们得到您的 parentElement
的 button
,因为您的 id
或“标签”位于父元素上。然后,您可以从父元素的 id
中获取名称。
请注意,id
属性不能有空格或 .
或 #
或除 _
之外的大多数特殊字符。
最后,我们需要选择您的“输出”元素,我们将使用 id
来做到这一点。
document.querySelector('#' + name + '-output');
将获得具有 id
和给定 name
+ -output
的元素。例如,如果您单击按钮 a1
,这将获得 id
为 a1-output
的元素。 #
表示您正在搜索 id
。
既然我们将此元素存储在变量 print
中,我们可以使用 innerHTML
属性将文本放入其中。
const button = document.querySelectorAll('.btn');
for(var i=0; i < button.length; i++) {
button[i].addEventListener('click', printLabel);
}
function printLabel(e) {
var target = e.target;
var parent = target.parentElement;
const name = parent.id;
const print = document.querySelector('#' + name + '-output');
print.innerHTML = name;
}
我创建了一个 JSFiddle 来帮助您。
如果您有任何问题,请告诉我。
答案 1 :(得分:1)
<script>
function printDiv(divName){
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
</script>
<h1> do not print this </h1>
<div id='printMe'>
Print this only
</div>
<button onclick="printDiv('printMe')">Print only the above div</button>
答案 2 :(得分:1)
我们可以在这里使用 event bubbling 和 data attributes。用数据属性替换非标准的 label
属性。此外,如果 a
不是导航元素,请不要使用它,而是使用 button
。
//Get the divs
let divs = document.querySelectorAll("[data-label]")
for(var i = 0; i < divs.length; i++){
//Add the event listener to the DIVs, yes the divs
divs[i].addEventListener("click", function(event){
//Did a button fire the event?
if(event.target.tagName === "BUTTON"){
//update the output div in the clicked div
this.querySelector(".output").innerText = this.dataset.label;
}
});
}
<div class="container">
<div class="row">
<div class="col-md-3" data-label="a1">
<button class="btn btn-primary" role="button">Button 01</button>
<div class="output"></div>
</div>
<div class="col-md-3" data-label="a2">
<button class="btn btn-primary"role="button">Button 02</button>
<div class="output"></div>
</div>
<div class="col-md-3" data-label="a3">
<button class="btn btn-primary" role="button">Button 03</button>
<div class="output"></div>
</div>
<div class="col-md-3" data-label="a4">
<button class="btn btn-primary" role="button">Button 04</button>
<div class="output"></div>
</div>
</div>
</div>
答案 3 :(得分:0)
只需将您的脚本部分更改为以下内容即可使其工作而无需更改 HTML
<script>
//getting all buttons
var buttons = document.getElementsByClassName("btn");
//adding event listner to all buttons
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", printLabel, false);
}
function printLabel() {
const outputDiv = this.parentElement.querySelector(".output"); // this will select only closet div with given class
outputDiv.innerText = this.parentElement.getAttribute("label");
}
</script>