显示/隐藏具有基于checkboxex选中的数据属性的div

问题描述 投票：3回答：6

我有一个div序列，带有一些相似的数据属性。我希望当用户选中该复选框时，与之对应的div在选中时会出现。

该代码可显示div，但是当未选中此复选框时，div会继续显示。

.letters{
  display: none;
}

<div>
  <div class="letters" data-text="b">B</div>
  <div class="letters" data-text="b">B</div>
  <div class="letters" data-text="b">B</div>
  <div class="letters" data-text="a">A</div>
  <div class="letters" data-text="b">B</div>
  <div class="letters" data-text="c">C</div>
  <div class="letters" data-text="a">A</div>
  <div class="letters" data-text="c">C</div>
  <div class="letters" data-text="a">A</div>
</div>


<input type="checkbox" value="a">a</br>
<input type="checkbox" value="b">b</br>
<input type="checkbox" value="c">c</br>

const elements = document.querySelectorAll(".letters")
const inputs = document.querySelectorAll("input")

inputs.forEach(item => {
  item.addEventListener('change', () => {

    if (item.checked){

      elements.forEach(e => {
         if (e.getAttribute('data-text') == item.value) {
          e.style.display = "block";
         }else{
          e.style.display = "none";
         }

      })
    }
  })     
})

如何在未选中时使div隐藏，而在选中时保持其他显示？

javascript
6个回答
4
投票

请取消选中此复选框时添加else块以隐藏元素。

const elements = document.querySelectorAll(".letters");
const inputs = document.querySelectorAll("input");
inputs.forEach(item => {
    item.addEventListener('change', function() {

        if (this.checked) {
            elements.forEach(e => {
                if (e.getAttribute('data-text') == this.value) {
                    e.style.display = "block";
                }
            })
        } else {
            elements.forEach(e => {
                if (e.getAttribute('data-text') == this.value) {
                    e.style.display = "none";
                }
            })
        }
    })
});
.letters {
            display: none;
        }
    <div>
        <div class="letters" data-text="b">B</div>
        <div class="letters" data-text="b">B</div>
        <div class="letters" data-text="b">B</div>
        <div class="letters" data-text="a">A</div>
        <div class="letters" data-text="b">B</div>
        <div class="letters" data-text="c">C</div>
        <div class="letters" data-text="a">A</div>
        <div class="letters" data-text="c">C</div>
        <div class="letters" data-text="a">A</div>
    </div>

    <input type="checkbox" value="a">a</br>
    <input type="checkbox" value="b">b</br>
    <input type="checkbox" value="c">c</br>
2
投票

您可以尝试以下方法：

const elements = document.querySelectorAll(".letters")
const inputs = document.querySelectorAll("input")

inputs.forEach(item => {
  item.addEventListener('change', () => {

      elements.forEach(e => e.style.display = e.getAttribute('data-text') === item.value && item.checked ? 'block' : 'none');

  })     
})
.letters{
  display: none;
}
<div>
  <div class="letters" data-text="b">B</div>
  <div class="letters" data-text="b">B</div>
  <div class="letters" data-text="b">B</div>
  <div class="letters" data-text="a">A</div>
  <div class="letters" data-text="b">B</div>
  <div class="letters" data-text="c">C</div>
  <div class="letters" data-text="a">A</div>
  <div class="letters" data-text="c">C</div>
  <div class="letters" data-text="a">A</div>
</div>


<input type="checkbox" value="a">a</br>
<input type="checkbox" value="b">b</br>
<input type="checkbox" value="c">c</br>
0
投票

我添加了一小段CSS（可选）以将显示的字母隐藏起来。

然后您需要确定如果复选框处于打开/关闭状态，该怎么办。

请参阅下面的正在运行的演示代码

const elements = document.querySelectorAll(".letters")
const inputs = document.querySelectorAll("input")

inputs.forEach(item => {
  item.addEventListener('change', () => {

    if (item.checked) {
      elements.forEach(e => {
        if (e.getAttribute('data-text') === item.value) {
          e.style.display = "block";
        }
      })
    } else {
      elements.forEach(e => {
        if (e.getAttribute('data-text') === item.value) {
          e.style.display = "none";
        }
      })
    }
  })
})
.letters{
   display: none;
}
<div>
  <div class="letters" data-text="b">B</div>
  <div class="letters" data-text="b">B</div>
  <div class="letters" data-text="b">B</div>
  <div class="letters" data-text="a">A</div>
  <div class="letters" data-text="b">B</div>
  <div class="letters" data-text="c">C</div>
  <div class="letters" data-text="a">A</div>
  <div class="letters" data-text="c">C</div>
  <div class="letters" data-text="a">A</div>
</div>


<input type="checkbox" value="a">a</br>
<input type="checkbox" value="b">b</br>
<input type="checkbox" value="c">c</br>
0
投票

目前，您仅在if (item.checked)时才执行某项操作，因此，当您取消选中复选框时，什么也没发生

您的下一个问题是，即使元素与复选框无关，您也将样式应用于每个元素。

这是事件监听器中函数的更好方法。 

      elements.forEach(e => {
         if (e.getAttribute('data-text') !== item.value) {
                return;
         } 

         if (item.checked){
              e.style.display = "block";
         } else {
             e.style.display = "none";
         }
      })
-1
投票

单击复选框后，获取值并获取与值对应的div。将显示设置为选定的div都不显示

function func(e) {
  var x = document.querySelectorAll('div[data-text=' + e.getAttribute('value') + ']')
  for (let i = 0; i < x.length; i++) {
    if (x[i].style.display == "block")
      x[i].style.display = "none"
    else
      x[i].style.display = "block"
  }
}
.letters {
  display: none;
}
<div>
  <div class="letters" data-text="b">B</div>
  <div class="letters" data-text="b">B</div>
  <div class="letters" data-text="b">B</div>
  <div class="letters" data-text="a">A</div>
  <div class="letters" data-text="b">B</div>
  <div class="letters" data-text="c">C</div>
  <div class="letters" data-text="a">A</div>
  <div class="letters" data-text="c">C</div>
  <div class="letters" data-text="a">A</div>
</div>


<input type="checkbox" value="a" onclick='func(this)'>a</br>
<input type="checkbox" value="b" onclick='func(this)'>b</br>
<input type="checkbox" value="c" onclick='func(this)'>c</br>
-1
投票

您的代码中缺少其他块

const elements = document.querySelectorAll(".letters")
const inputs = document.querySelectorAll("input")

inputs.forEach(item => {
  item.addEventListener('change', () => {
    if (item.checked){ 
      elements.forEach(e => {
         if (e.getAttribute('data-text') == item.value) {
          e.style.display = "block";
         }else{
          e.style.display = "none";
         }
      })
    }
    else{
             elements.forEach(e => {
         if (e.getAttribute('data-text') == item.value) {
          e.style.display = "none";
         } 
      })
    }
  })     
})
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.