querySelectorAll 可以使用数组吗？

Question

我想让这个开关在月度价格和年度价格之间交换文本。我发现使用 querySelectorAll 效果最好，但是因为我需要在三个不同的地方完成此操作，所以我能找到的唯一方法如下所示。我可以使用数组 select 所有需要的跨度吗，因为我在页面中有其他我不需要 select 的跨度？或者您能以一种可以改进此代码的方式帮助我吗？

function mouseToggleSwitch() {
  var checkBox = document.getElementById("myCheck");
  var month = document.querySelectorAll("span")[1];
  var year = document.querySelectorAll("span")[2];
  var proMonth = document.querySelectorAll("span")[3];
  var proYear = document.querySelectorAll("span")[4];
  var masterMonth = document.querySelectorAll("span")[5];
  var masterYear = document.querySelectorAll("span")[6];


  if (checkBox.checked == true) {
    month.style.display = "block";
    year.style.display = "none";
    proMonth.style.display = "block";
    proYear.style.display = "none";
    masterMonth.style.display = "block";
    masterYear.style.display = "none";
  } else {
    month.style.display = "none";
    year.style.display = "block";
    proMonth.style.display = "none";
    proYear.style.display = "block";
    masterMonth.style.display = "none";
    masterYear.style.display = "block";
  }

}

.display-4 {
  font-size: 2rem;
  font-weight: 700;
  color: hsl(233, 13%, 49%);
  font-family: Montserrat, sans-serif;
}


/******* TOGGLE SWITCH *******/

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  margin: 0 20px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(to right, hsl(236, 72%, 79%), hsl(237, 63%, 64%));
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.slider {
  background-image: linear-gradient(to right, hsl(236, 72%, 79%), hsl(237, 63%, 64%))
}

input:checked+ :hover {
  background: hsl(240, 100%, 90%);
}

input:focus+.slider {
  box-shadow: 0 0 1px hsl(237, 63%, 64%);
}

input:checked+.slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

.slider {
  border-radius: 34px;
}

.slider:hover {
  background: hsl(240, 100%, 90%);
}

.slider:before {
  border-radius: 50%;
}

.toggle-price p {
  display: inline-block;
  position: relative;
  top: 4px;
  color: hsl(234, 14%, 74%);
}

.card-title {
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  font-size: 2rem;
  color: hsl(232, 13%, 33%);
}

.annual-price {
  display: none;
}

<div id="wrapper">

  <div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">

    <div class="toggle-price">
      <p class="annual">Annually</p>
      <label class="switch">
                      <input type="checkbox" id="myCheck" onClick="mouseToggleSwitch()" autofocus checked>
                      <span class="slider"></span>
                </label>
      <p class="month">Monthly</p>
    </div>
  </div>

  <div class="container">
    <div class="card-deck mb-3 text-center">

      <div class="card mb-4 shadow-sm">
        <div class="card-header">
          <h4 class="my-0">Basic</h4>
        </div>
        <div class="card-body">
          <h1 class="card-title pricing-card-title"><span class="monthly-price">&dollar;19.99</span>
            <span class="annual-price">&dollar;199.99</span></h1>
        </div>
      </div>
      <div class="card mb-4 shadow-sm highlight">
        <div class="card-header">
          <h4 class="my-0">Professional</h4>
        </div>
        <div class="card-body">
          <h1 class="card-title pricing-card-title"><span id="monthly-price">&dollar;24.99</span>
            <span class="annual-price">&dollar;249.99</span></h1>
        </div>
      </div>
      <div class="card mb-4 shadow-sm">
        <div class="card-header">
          <h4 class="my-0">Master</h4>
        </div>
        <div class="card-body">
          <h1 class="card-title pricing-card-title"><span class="monthly-price">&dollar;39.99</span>
            <span class="annual-price">&dollar;399.99</span></h1>
        </div>
      </div>

    </div>
  </div>

</div>

https://codepen.io/LizUK/pen/abOMQYx

Answer 1

像这样

我必须修复一个应该是 class

的 ID

注意：我还将显示初始化为从服务器加载时复选框上的任何选中状态

我也从复选框中删除了内联函数

function show(month) {
  document.querySelectorAll(".pricing-card-title").forEach(function(container) { 
    container.querySelector("span.monthly-price").style.display = month ? "block" : "none";
    container.querySelector("span.annual-price").style.display = month ? "none" : "block";
  })
}

window.addEventListener("load", function() { // on page load
  const chk = document.getElementById("myCheck")
  chk.addEventListener("click", function() {
    show(this.checked)
  })
  show(chk.checked); // initialise based on initial checked
})

function show(month) {
  document.querySelectorAll(".pricing-card-title").forEach(function(container) {
    container.querySelector("span.monthly-price").style.display = month ? "block" : "none";
    container.querySelector("span.annual-price").style.display = month ? "none" : "block";
  })
}

window.addEventListener("load", function() { // on page load
  const chk = document.getElementById("myCheck")
  chk.addEventListener("click", function() {
    show(this.checked)
  })
  show(chk.checked); // initialise based on initial checked
})

.display-4 {
  font-size: 2rem;
  font-weight: 700;
  color: hsl(233, 13%, 49%);
  font-family: Montserrat, sans-serif;
}


/******* TOGGLE SWITCH *******/

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  margin: 0 20px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(to right, hsl(236, 72%, 79%), hsl(237, 63%, 64%));
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.slider {
  background-image: linear-gradient(to right, hsl(236, 72%, 79%), hsl(237, 63%, 64%))
}

input:checked+ :hover {
  background: hsl(240, 100%, 90%);
}

input:focus+.slider {
  box-shadow: 0 0 1px hsl(237, 63%, 64%);
}

input:checked+.slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

.slider {
  border-radius: 34px;
}

.slider:hover {
  background: hsl(240, 100%, 90%);
}

.slider:before {
  border-radius: 50%;
}

.toggle-price p {
  display: inline-block;
  position: relative;
  top: 4px;
  color: hsl(234, 14%, 74%);
}

.card-title {
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  font-size: 2rem;
  color: hsl(232, 13%, 33%);
}

<div id="wrapper">

  <div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">

    <div class="toggle-price">
      <p class="annual">Annually</p>
      <label class="switch">
                      <input type="checkbox" id="myCheck" autofocus checked>
                      <span class="slider"></span>
                </label>
      <p class="month">Monthly</p>
    </div>
  </div>

  <div class="container">
    <div class="card-deck mb-3 text-center">

      <div class="card mb-4 shadow-sm">
        <div class="card-header">
          <h4 class="my-0">Basic</h4>
        </div>
        <div class="card-body">
          <h1 class="card-title pricing-card-title">
            <span class="monthly-price">&dollar;19.99</span>
            <span class="annual-price">&dollar;199.99</span></h1>
        </div>
      </div>
      <div class="card mb-4 shadow-sm highlight">
        <div class="card-header">
          <h4 class="my-0">Professional</h4>
        </div>
        <div class="card-body">
          <h1 class="card-title pricing-card-title">
            <span class="monthly-price">&dollar;24.99</span>
            <span class="annual-price">&dollar;249.99</span></h1>
        </div>
      </div>
      <div class="card mb-4 shadow-sm">
        <div class="card-header">
          <h4 class="my-0">Master</h4>
        </div>
        <div class="card-body">
          <h1 class="card-title pricing-card-title">
            <span class="monthly-price">&dollar;39.99</span>
            <span class="annual-price">&dollar;399.99</span></h1>
        </div>
      </div>

    </div>
  </div>

</div>

更短，由月度价格驱动 - 假设年度跨度在月度跨度之后

function show(month) {
  document.querySelectorAll("span.monthly-price").forEach(function(span) { 
    span.style.display = month ? "block" : "none";
    span.nextElementSibling.style.display = month ? "none" : "block";
  })
}

// same "load" code as first snippet

function show(month) {
  document.querySelectorAll("span.monthly-price").forEach(function(span) { 
    span.style.display = month ? "block" : "none";
    span.nextElementSibling.style.display = month ? "none" : "block";
  })
}

window.addEventListener("load", function() { // on page load
  const chk = document.getElementById("myCheck")
  chk.addEventListener("click", function() {
    show(this.checked)
  })
  show(chk.checked); // initialise based on initial checked
})

.display-4 {
  font-size: 2rem;
  font-weight: 700;
  color: hsl(233, 13%, 49%);
  font-family: Montserrat, sans-serif;
}


/******* TOGGLE SWITCH *******/

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  margin: 0 20px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(to right, hsl(236, 72%, 79%), hsl(237, 63%, 64%));
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.slider {
  background-image: linear-gradient(to right, hsl(236, 72%, 79%), hsl(237, 63%, 64%))
}

input:checked+ :hover {
  background: hsl(240, 100%, 90%);
}

input:focus+.slider {
  box-shadow: 0 0 1px hsl(237, 63%, 64%);
}

input:checked+.slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

.slider {
  border-radius: 34px;
}

.slider:hover {
  background: hsl(240, 100%, 90%);
}

.slider:before {
  border-radius: 50%;
}

.toggle-price p {
  display: inline-block;
  position: relative;
  top: 4px;
  color: hsl(234, 14%, 74%);
}

.card-title {
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  font-size: 2rem;
  color: hsl(232, 13%, 33%);
}

<div id="wrapper">

  <div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">

    <div class="toggle-price">
      <p class="annual">Annually</p>
      <label class="switch">
                      <input type="checkbox" id="myCheck" autofocus checked>
                      <span class="slider"></span>
                </label>
      <p class="month">Monthly</p>
    </div>
  </div>

  <div class="container">
    <div class="card-deck mb-3 text-center">

      <div class="card mb-4 shadow-sm">
        <div class="card-header">
          <h4 class="my-0">Basic</h4>
        </div>
        <div class="card-body">
          <h1 class="card-title pricing-card-title">
            <span class="monthly-price">&dollar;19.99</span>
            <span class="annual-price">&dollar;199.99</span></h1>
        </div>
      </div>
      <div class="card mb-4 shadow-sm highlight">
        <div class="card-header">
          <h4 class="my-0">Professional</h4>
        </div>
        <div class="card-body">
          <h1 class="card-title pricing-card-title">
            <span class="monthly-price">&dollar;24.99</span>
            <span class="annual-price">&dollar;249.99</span></h1>
        </div>
      </div>
      <div class="card mb-4 shadow-sm">
        <div class="card-header">
          <h4 class="my-0">Master</h4>
        </div>
        <div class="card-body">
          <h1 class="card-title pricing-card-title">
            <span class="monthly-price">&dollar;39.99</span>
            <span class="annual-price">&dollar;399.99</span></h1>
        </div>
      </div>

    </div>
  </div>

</div>

Answer 2

function mouseToggleSwitch() {

  var checkBox = document.getElementById("myCheck");

  const clsName = checkBox.checked ? 'monthly-price' : 'annual-price';

  document.querySelectorAll('.monthly-price,.annual-price').forEach((x) => x.className == clsName ? x.style.display = "block" : x.style.display = "none");
}

.display-4 {
  font-size: 2rem;
  font-weight: 700;
  color: hsl(233, 13%, 49%);
  font-family: Montserrat, sans-serif;
}


/******* TOGGLE SWITCH *******/

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  margin: 0 20px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(to right, hsl(236, 72%, 79%), hsl(237, 63%, 64%));
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.slider {
  background-image: linear-gradient(to right, hsl(236, 72%, 79%), hsl(237, 63%, 64%))
}

input:checked+ :hover {
  background: hsl(240, 100%, 90%);
}

input:focus+.slider {
  box-shadow: 0 0 1px hsl(237, 63%, 64%);
}

input:checked+.slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

.slider {
  border-radius: 34px;
}

.slider:hover {
  background: hsl(240, 100%, 90%);
}

.slider:before {
  border-radius: 50%;
}

.toggle-price p {
  display: inline-block;
  position: relative;
  top: 4px;
  color: hsl(234, 14%, 74%);
}

.card-title {
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  font-size: 2rem;
  color: hsl(232, 13%, 33%);
}

.annual-price {
  display: none;
}

<div id="wrapper">

  <div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">

    <div class="toggle-price">
      <p class="annual">Annually</p>
      <label class="switch">
                          <input type="checkbox" id="myCheck" onClick="mouseToggleSwitch()" autofocus checked>
                          <span class="slider"></span>
                    </label>
      <p class="month">Monthly</p>
    </div>
  </div>

  <div class="container">
    <div class="card-deck mb-3 text-center">

      <div class="card mb-4 shadow-sm">
        <div class="card-header">
          <h4 class="my-0">Basic</h4>
        </div>
        <div class="card-body">
          <h1 class="card-title pricing-card-title"><span class="monthly-price">&dollar;19.99</span>
            <span class="annual-price">&dollar;199.99</span></h1>
        </div>
      </div>
      <div class="card mb-4 shadow-sm highlight">
        <div class="card-header">
          <h4 class="my-0">Professional</h4>
        </div>
        <div class="card-body">
          <h1 class="card-title pricing-card-title"><span class="monthly-price">&dollar;24.99</span>
            <span class="annual-price">&dollar;249.99</span></h1>
        </div>
      </div>
      <div class="card mb-4 shadow-sm">
        <div class="card-header">
          <h4 class="my-0">Master</h4>
        </div>
        <div class="card-body">
          <h1 class="card-title pricing-card-title"><span class="monthly-price">&dollar;39.99</span>
            <span class="annual-price">&dollar;399.99</span></h1>
        </div>
      </div>

    </div>
  </div>

</div>

使用 document.querySelectorAll，我们可以根据类名从那里选择月度价格和年度价格，我们可以将块或显示分配为 none。使用 document.querySelectorAll('span') 似乎不是一个完美的方法，因为如果在此之前文档中有任何其他跨度，它可能会误导。希望这对您有所帮助！

querySelectorAll 可以使用数组吗？

Can yo use an array for querySelectorAll?

javascript

selectors-api