Question

我想添加一个条件，即只有当两个 addEventListener('change', SwitchG)事件为True（两者都已更改）。当两者之一更改时，我当前使用的代码已经激活了该功能。

var hallo = document.getElementById("S131_01");
var hallo1 = document.getElementById("S130_01");

hallo.addEventListener('change', SwitchG);
hallo1.addEventListener('change', SwitchG);

function SwitchG () {
    var test1 = document.getElementById("submit");                                                                             
  test1.classList.add("css");   
}

Answer 1

您需要另一个变量，该变量检查两个变量是否都已更改，并且仅在两个更改都已发生时才执行处理程序函数：

var hallo = document.getElementById("S131_01");
var hallo1 = document.getElementById("S130_01");
var countChanges = 0; // <-- this tracks changes

hallo.addEventListener('change', SwitchG);
hallo1.addEventListener('change', SwitchG);

function SwitchG () {
  countChanges += 1;  // <-- count up
  if (countChanges >= 2) {
    countChanges = 0; // <-- reset (if needed)

    var test1 = document.getElementById("submit");                                                                             
    test1.classList.add("css"); 
  }  
}

但是，更健壮的实现还可以跟踪发生更改的元素，并确保从单个元素重复发生change事件不会成功运行处理程序。

例如，使用该实用程序：

function ChangedCounter (minChanges) {
  var elements = new Set();
  return {
    changed(element) {
      elements.add(element);
    },
    clear() {
      elements.clear();
    },
    isReady() {
      return elements.size >= minChanges;
    }
  };
}

您应该这样写：

var hallo = document.getElementById("S131_01");
var hallo1 = document.getElementById("S130_01");
var countChanges = ChangedCounter(2);

hallo.addEventListener('change', SwitchG);
hallo1.addEventListener('change', SwitchG);

function SwitchG (e) {
  countChanges.changed(e.target);
  if (countChanges.isReady()) {
    countChanges.clear();

    var test1 = document.getElementById("submit");                                                                             
    test1.classList.add("css"); 
  }  
}

Answer 2

您可以创建一个“状态”以在两者都更改时进行存储。我创建了两个变量halloState和hallo1State。下面的代码段显示了如何实现：

var hallo = document.getElementById("S131_01");
var hallo1 = document.getElementById("S130_01");
var halloState = false;
var hallo1State = false;

hallo.addEventListener('change', SwitchG);
hallo1.addEventListener('change', SwitchG);

function SwitchG (e) {
   if(e.target.id === "S131_01")  halloState = true;
   else if(e.target.id === "S130_01")  hallo1State = true;

   if(halloState && hallo1State){
      var test1 = document.getElementById("submit");                                                           
      test1.classList.add("css");   
   }
}

.css {
  background-color:red;
}

<input id="S131_01" type="text"/>
<input id="S130_01" type="text"/>
<button id="submit">Submit</button>

如何使用多个事件处理程序触发函数（更改）

2 个答案: