Question

我有两个<h4>具有相同类别的＆＃34;模态标题＆＃34;，以及两个带ID＆amp;的按钮班级 - ＆＃34;储备＆＃34;和＆＃34;查询＆＃34;。按下按钮＆＃34;预约＆＃34;，我希望H4更改为＆＃34;预约＆＃34;，然后点击＆＃34;查询＆＃34;按钮，H4中的文本应相应更改。

问题是，我有两个容器，它们使用相同的按钮与“固定”相互作用。 H4元素，如果我使用＆＃34;保留＆＃34;在容器1中的按钮，H4将成功更改，如果我继续点击＆＃34;查询＆＃34;在容器2中的按钮，H4元素不会更新为＆＃34;查询＆＃34;文字，但如果我使用＆＃34;查询＆＃34;而是在容器1中的按钮。这是为什么？我怎样才能使它们同时发挥作用？（并行）事实上，有没有一种简单的方法来实现这一目标？

<h4 class="modal-title" id="modal-title">Modal Heading</h4>

容器1：

<div class="col-sm-6 col-md-6">
   <a id="reserve" class="reserve">Change to Reserve</a>
   <a id="enquire" class="enquire">Change to Enquire</a>
</div>

容器2：

<div class="col-sm-6 col-md-6">
   <a id="enquire" class="enquire">Change to Enquire</a>
   <a id="reserve" class="reserve">Change to Reserve</a>
</div>

JavaScript的：

var btnEnquire =  document.getElementById("enquire");
var btnReserve =  document.getElementById("reserve");
btnEnquire.onclick = function(){
    var enquireTxt = document.getElementsByClassName("modal-title");
    for (var i = 0; i < enquireTxt.length; i++) {
      enquireTxt[i].innerText = "Enquire";
    }
}
btnReserve.onclick = function(){
    var reserveTxt = document.getElementsByClassName("modal-title");
    for (var i = 0; i < reserveTxt.length; i++) {
      reserveTxt[i].innerText = "Reserve";
    }
}

（根据一些StackOverflow注释，这是使用getElementsByClassName时返回值的唯一方法）

Answer 1

您永远不应将相同的ID分配给多个元素。相反，只使用类引用并循环结果（就像你使用'modal-title'一样）来添加你的点击处理程序。

var btnEnquire =  document.getElementsByClassName("enquire");
var btnReserve =  document.getElementsByClassName("reserve");

for (var i = 0; i < btnEnquire.length; i++) {
    btnEnquire[i].onclick = function(){
    var enquireTxt = document.getElementsByClassName("modal-title");
        for (var i = 0; i < enquireTxt.length; i++) {
          enquireTxt[i].innerText = "Enquire";
        }
    }
}

for (var i = 0; i < btnReserve.length; i++) {
    btnReserve[i].onclick = function(){
    var reserveTxt = document.getElementsByClassName("modal-title");
        for (var i = 0; i < reserveTxt.length; i++) {
          reserveTxt[i].innerText = "Reserve";
        }
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4 class="modal-title" id="modal-title">Modal Heading</h4>

<div class="col-sm-6 col-md-6">
   <a class="reserve" href="#">Change to Reserve</a>
   <a class="enquire" href="#">Change to Enquire</a>
</div>

<div class="col-sm-6 col-md-6">
   <a class="enquire" href="#">Change to Enquire</a>
   <a class="reserve" href="#">Change to Reserve</a>
</div>

即使仅为modal-title使用id也会更干净，因此您不需要嵌套循环。

Answer 2

这是一个如何避免重复id但是处理元素组的示例。它通过提取函数来隔离函数的重复，然后通过按钮单击调用带有必要数据的函数。

＆＃13;

window.addEventListener("DOMContentLoaded", function(){
  var btnEnquire =  document.getElementById("btnEnquire");
  var btnReserve =  document.getElementById("btnReserve");

  var modals = document.getElementsByClassName("modal-title");

  // 1. You can keep the button event handlers separate *****
  btnEnquire.addEventListener("click", function(){
    changeVal("Enquire");
  });

  btnReserve.addEventListener("click", function(){
    changeVal("Reserve");
  });
  // *********************************************************
  
  // 2. Or, you could combine into more compact code: ********
  var buttons = document.querySelectorAll(".myButton");
  buttons.forEach(function(button){
     button.addEventListener("click", function(){
       changeVal(this.textContent);
     });
  });
  // *********************************************************

  // The main functionality has been extracted and exists only once
  // However, it will produce different results based on what you
  // pass into it.
  function changeVal(val){
    for (var i = 0; i < modals.length; i++) {
      modals[i].textContent = val;
    }
  }
});

＆＃13;

<button id="btnEnquire" class="myButton">Enquire</button>
<button id="btnReserve" class="myButton">Reserve</button>

<h4 class="modal-title" id="modal-title">Modal Heading</h4>
Container 1:

<div class="col-sm-6 col-md-6">
   <a id="reserve" class="reserve">Change to Reserve</a>
   <a id="enquire" class="reserve">Change to Enquire</a>
</div>

<h4 class="modal-title" id="modal-title">Modal Heading</h4>
Container 2:

<div class="col-sm-6 col-md-6">
   <a id="enquire" class="reserve">Change to Enquire</a>
   <a id="reserve" class="reserve">Change to Reserve</a>
</div>

＆＃13;

在按钮/链接上使用相同的ID /类更新<h4>中的文本

2 个答案: