Question

这是我要尝试的方法。基本上应该做的是，当点击<input>为type的{{1}}时，下一个button（在这种情况下为硬编码） <div>至display: none。但是它不起作用。

display: block

Answer 1

使用if (node.getAttribute('class') === 'first-employee')时会返回：

class='first-employee' // true

class='employee first-employee' // false

您必须使用： if (node.classList.contains("first-employee"))：

class='first-employee' // true

class='employee first-employee' // true

Answer 2

如果我正确理解了您的问题，即单击按钮时要在其旁边显示/隐藏DIV标签，该标签位于按钮和“第二雇员”的共同父级div中。

我认为以下内容会有所帮助。

// For single Div show/hide on button click
let btnMatchDiv = document.querySelector('#btnMatchDivs');

btnMatchDiv.addEventListener('click', matchDivs, true);

function matchDivs() {

  let showInputs = document.querySelectorAll('input')
  const inputs = Array.from(showInputs)

  inputs.map(input => {

    // Method 1
    // ===========================

    /*if (input.parentNode.getAttribute('class') === 'first-employee') {
      document.querySelector('.second-employee').setAttribute('style', 'display: block')
    }*/


    // Method 2 : you can use new classList method
    // ===========================

    if (input.parentNode.classList.contains('first-employee')) {
      input.nextElementSibling.classList.toggle('hidden');
    }

    //return input
  })
}

body {
  font-family: Arial;
}

.first-employee {
  display: block;
  padding: 1em;
  border: 1px solid green;
}

.second-employee {
  padding: 1em;
  border: 1px solid red;
}

#btnMatchDivs {
  padding: 1em 0.5em;
  border: 1px solid #777;
}

.hidden {
  display: none
}

<div class="first-employee">
  <h2>
    First Employee
  </h2>
  <input type="button" id="btnMatchDivs" value="Toggle Second Employee" />

  <div class="second-employee hidden">
    Second Employee
  </div>
</div>

如果需要进一步的帮助，请告诉我。

谢谢，吉涅什·拉瓦尔（Jignesh Raval）

Answer 3

如果您要切换多个项目，则可以尝试以下代码。

// For multiple Div show/hide on button click
// ===================================

let showInputs = document.querySelectorAll('input')
const btnInputs = Array.from(showInputs)

// Bind click event to each button input
btnInputs.map(input => {
  input.addEventListener('click', matchDivs, false);
})


function matchDivs(event) {

  let buttonEle = event.currentTarget;

  if (buttonEle.parentNode.classList.contains('first-employee')) {
    buttonEle.nextElementSibling.classList.toggle('hidden');
  }

}

body {
  font-family: Arial;
}

.first-employee {
  display: block;
  padding: 1em;
  border: 1px solid green;
  margin-bottom: 1em;
}

.second-employee {
  margin: 1em 0;
  padding: 1em;
  border: 1px solid red;
}

#btnMatchDivs {
  padding: 1em 0.5em;
  border: 1px solid #777;
}

.hidden {
  display: none
}

<div class="first-employee">
  <h2>
    First Employee 1
  </h2>
  <input type="button" id="btnMatchDivs" value="Match Divs" />

  <div class="second-employee hidden">
    Second Employee 1
  </div>
</div>

<div class="first-employee">
  <h2>
    First Employee 2
  </h2>
  <input type="button" id="btnMatchDivs" value="Match Divs" />

  <div class="second-employee hidden">
    Second Employee 2
  </div>
</div>

<div class="first-employee">
  <h2>
    First Employee 3
  </h2>
  <input type="button" id="btnMatchDivs" value="Match Divs" />

  <div class="second-employee hidden">
    Second Employee 3
  </div>
</div>

我希望这会有所帮助。

谢谢，吉涅什·拉瓦尔（Jignesh Raval）

为什么使用.parentNode的此代码不起作用？

3 个答案: