Question

我有 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;
}

Answer 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>

最后，对您的 JavaScript 进行一些更改。您将看到的第一个更改是我将 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 来帮助您。

如果您有任何问题，请告诉我。

Answer 2

    <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>

Answer 3

我们可以在这里使用 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>

Answer 4

只需将您的脚本部分更改为以下内容即可使其工作而无需更改 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>

JavaScript 如何在 DIV 中打印标签？

4 个答案: