小贝子编程

如何使手风琴不起作用并告诉我如果元素存在，则无法读取未定义的属性"类列表"？



这是我目前拥有的。这段代码没有正常工作

我需要这样做-如果我按下标题元素部分必须消失，当我再次按下它必须出现。我不明白为什么它告诉我元素未定义，如果它存在于HTML....有人能帮我解决这个问题吗?

var filterTrigger = document.querySelectorAll('.catalog__filter-form h3');
var filterSection = document.querySelectorAll('.catalog__filter-section');
var filterInputs = document.querySelectorAll('.catalog__filter-inputs');
for (var j = 0; j < filterTrigger.length; j++) {
filterInputs[j].classList.add('filter-hidden');
filterTrigger[j].addEventListener('click', function(evt) {
evt.preventDefault();
filterSection[j].classList.toggle('catalog__filter-section--opened');
filterInputs[j].classList.toggle('filter-visible');
});
}
.catalog__container {
max-width: 1366px;
margin: 0 auto;
}
.catalog__content-container {
margin-left: 7.2%;
margin-right: 7.2%;
margin-top: 91px;
}
.catalog__filter-form {
border: 1px solid brown;
width: 248px;
}
.catalog__filter-form h3 {
font-family: arial;
font-size: 16px;
font-weight: 500;
line-height: 21px;
color: black;
margin: 0;
padding-top: 22px;
padding-bottom: 23px;
padding-left: 24px;
}
.catalog__filter-section {
padding-left: 24px;
border-bottom: 1px solid brown;
position: relative;
}
.catalog__filter-section::after {
content: "";
position: absolute;
right: 22px;
top: -38px;
background-image: url("../img/arrow-down-icon.svg");
background-repeat: no-repeat;
width: 18px;
height: 12px;
}
.catalog__filter-section--opened::after {
background-image: url("../img/arrow-up-icon.svg")
}
.catalog__filter-section:last-child {
border: none;
}
.catalog__filter-inputs {
display: flex;
flex-direction: column;
display: flex;
padding-bottom: 13px;
}
.catalog__filter-section label {
font-family: arial;
font-size: 14px;
font-weight: 500;
line-height: 18px;
color: black;
padding-left: 25px;
position: relative;
margin-bottom: 13px;
}
.catalog__filter-section input {
appearance: none;
}
.catalog__filter-section input:checked+span {
background-color: brown;
}
.catalog__filter-section span {
position: absolute;
width: 15px;
height: 15px;
left: 10px;
top: 2px;
border: 1px solid brown;
background-color: white;
}
.filter-hidden {
display: none;
}
.filter-visible {
display: flex;
}
<form class="catalog__filter-form">
<h3>Product</h3>
<div class="catalog__filter-section catalog__filter-section--opened" tabindex="0">
<div class="catalog__filter-inputs filter-visible">
<label>
<input type="checkbox" name="products" value="Necklaces" checked>
<span></span>
Necklaces
</label>
<label>
<input type="checkbox" name="products" value="Chokers" checked>
<span></span>
Chokers
</label>
<label>
<input type="checkbox" name="products" value="Rings">
<span></span>
Rings
</label>
<label>
<input type="checkbox" name="products" value="Earrings" checked>
<span></span>
Earrings
</label>
</div>
</div>
<h3>Material</h3>
<div class="catalog__filter-section" tabindex="0">
<div class="catalog__filter-inputs">
<label>
<input type="checkbox" name="material" value="Gold">
<span></span>
Gold
</label>
<label>
<input type="checkbox" name="material" value="Silver">
<span></span>
Silver
</label>
</div>
</div>
<h3>Collection</h3>
<div class="catalog__filter-section" tabindex="0">
<div class="catalog__filter-inputs">
<label>
<input type="checkbox" name="collection" value="Pink flamingo">
<span></span>
Pink flamingo
</label>
<label>
<input type="checkbox" name="collection" value="Dreams">
<span></span>
Dreams
</label>
</div>
</div>
<h3>Price</h3>
<div class="catalog__filter-section" tabindex="0">
<div class="catalog__filter-inputs">
<label>
<input type="checkbox" name="products" value="Necklaces">
Necklaces
</label>
</div>
</div>
</form>
</div>

因为当你点击h3隐藏子节点时函数会运行，此时j将为4。

创建const变量并在其中存储元素。

var filterTrigger = document.querySelectorAll('.catalog__filter-form h3');
var filterSection = document.querySelectorAll('.catalog__filter-section');
var filterInputs = document.querySelectorAll('.catalog__filter-inputs');
function onClick(event, secEl, inpEl){
event.preventDefault();
secEl.classList.toggle('catalog__filter-section--opened');
inpEl.classList.toggle('filter-visible');
}
for (var j = 0; j < filterTrigger.length; j++) {
const secEl = filterSection[j]
const inpEl = filterInputs[j]
filterInputs[j].classList.add('filter-hidden');
filterTrigger[j].addEventListener('click', function(e){ onClick(e, secEl, inpEl) });
}
.catalog__container {
max-width: 1366px;
margin: 0 auto;
}
.catalog__content-container {
margin-left: 7.2%;
margin-right: 7.2%;
margin-top: 91px;
}
.catalog__filter-form {
border: 1px solid brown;
width: 248px;
}
.catalog__filter-form h3 {
font-family: arial;
font-size: 16px;
font-weight: 500;
line-height: 21px;
color: black;
margin: 0;
padding-top: 22px;
padding-bottom: 23px;
padding-left: 24px;
}
.catalog__filter-section {
padding-left: 24px;
border-bottom: 1px solid brown;
position: relative;
}
.catalog__filter-section::after {
content: "";
position: absolute;
right: 22px;
top: -38px;
background-image: url("../img/arrow-down-icon.svg");
background-repeat: no-repeat;
width: 18px;
height: 12px;
}
.catalog__filter-section--opened::after {
background-image: url("../img/arrow-up-icon.svg")
}
.catalog__filter-section:last-child {
border: none;
}
.catalog__filter-inputs {
display: flex;
flex-direction: column;
display: flex;
padding-bottom: 13px;
}
.catalog__filter-section label {
font-family: arial;
font-size: 14px;
font-weight: 500;
line-height: 18px;
color: black;
padding-left: 25px;
position: relative;
margin-bottom: 13px;
}
.catalog__filter-section input {
appearance: none;
}
.catalog__filter-section input:checked+span {
background-color: brown;
}
.catalog__filter-section span {
position: absolute;
width: 15px;
height: 15px;
left: 10px;
top: 2px;
border: 1px solid brown;
background-color: white;
}
.filter-hidden {
display: none;
}
.filter-visible {
display: flex;
}
<form class="catalog__filter-form">
<h3>Product</h3>
<div class="catalog__filter-section catalog__filter-section--opened" tabindex="0">
<div class="catalog__filter-inputs filter-visible">
<label>
<input type="checkbox" name="products" value="Necklaces" checked>
<span></span>
Necklaces
</label>
<label>
<input type="checkbox" name="products" value="Chokers" checked>
<span></span>
Chokers
</label>
<label>
<input type="checkbox" name="products" value="Rings">
<span></span>
Rings
</label>
<label>
<input type="checkbox" name="products" value="Earrings" checked>
<span></span>
Earrings
</label>
</div>
</div>
<h3>Material</h3>
<div class="catalog__filter-section" tabindex="0">
<div class="catalog__filter-inputs">
<label>
<input type="checkbox" name="material" value="Gold">
<span></span>
Gold
</label>
<label>
<input type="checkbox" name="material" value="Silver">
<span></span>
Silver
</label>
</div>
</div>
<h3>Collection</h3>
<div class="catalog__filter-section" tabindex="0">
<div class="catalog__filter-inputs">
<label>
<input type="checkbox" name="collection" value="Pink flamingo">
<span></span>
Pink flamingo
</label>
<label>
<input type="checkbox" name="collection" value="Dreams">
<span></span>
Dreams
</label>
</div>
</div>
<h3>Price</h3>
<div class="catalog__filter-section" tabindex="0">
<div class="catalog__filter-inputs">
<label>
<input type="checkbox" name="products" value="Necklaces">
Necklaces
</label>
</div>
</div>
</form>
</div>

这不是小事，但你在这里

  1. 为触发器h3添加触发器类
  2. Close all on load
  3. 从容器代理div
  4. 添加一些缺失的html (span到最后一个复选框)

var filterSections = document.querySelectorAll('.catalog__filter-section');
var filterInputs = document.querySelectorAll('.catalog__filter-inputs');
const closeAll = () => {
filterInputs.forEach((inp, i) => inp.classList.add('filter-hidden'));
filterSections.forEach((section, i) => section.classList.remove('catalog__filter-section--opened'));
}
closeAll()
document.getElementById("container").addEventListener("click", function(e) {
const tgt = e.target;
if (!tgt.classList.contains("trigger")) return
const filterSection = tgt.nextElementSibling;
const filterInput = filterSection.querySelector(".catalog__filter-inputs");
closeAll();
filterSection.classList.toggle('catalog__filter-section--opened');
filterInput.classList.toggle('filter-visible');
});
.catalog__container {
max-width: 1366px;
margin: 0 auto;
}
.catalog__content-container {
margin-left: 7.2%;
margin-right: 7.2%;
margin-top: 91px;
}
.catalog__filter-form {
border: 1px solid brown;
width: 248px;
}
.catalog__filter-form h3 {
font-family: arial;
font-size: 16px;
font-weight: 500;
line-height: 21px;
color: black;
margin: 0;
padding-top: 22px;
padding-bottom: 23px;
padding-left: 24px;
}
.catalog__filter-section {
padding-left: 24px;
border-bottom: 1px solid brown;
position: relative;
}
.catalog__filter-section::after {
content: "";
position: absolute;
right: 22px;
top: -38px;
background-image: url("../img/arrow-down-icon.svg");
background-repeat: no-repeat;
width: 18px;
height: 12px;
}
.catalog__filter-section--opened::after {
background-image: url("../img/arrow-up-icon.svg")
}
.catalog__filter-section:last-child {
border: none;
}
.catalog__filter-inputs {
display: flex;
flex-direction: column;
display: flex;
padding-bottom: 13px;
}
.catalog__filter-section label {
font-family: arial;
font-size: 14px;
font-weight: 500;
line-height: 18px;
color: black;
padding-left: 25px;
position: relative;
margin-bottom: 13px;
}
.catalog__filter-section input {
appearance: none;
}
.catalog__filter-section input:checked+span {
background-color: brown;
}
.catalog__filter-section span {
position: absolute;
width: 15px;
height: 15px;
left: 10px;
top: 2px;
border: 1px solid brown;
background-color: white;
}
.filter-hidden {
display: none;
}
.filter-visible {
display: flex;
}
<div id="container">
<form class="catalog__filter-form">
<h3>Product</h3>
<div class="catalog__filter-section catalog__filter-section--opened" tabindex="0">
<div class="catalog__filter-inputs filter-visible">
<label>
<input type="checkbox" name="products" value="Necklaces" checked>
<span></span>
Necklaces
</label>
<label>
<input type="checkbox" name="products" value="Chokers" checked>
<span></span>
Chokers
</label>
<label>
<input type="checkbox" name="products" value="Rings">
<span></span>
Rings
</label>
<label>
<input type="checkbox" name="products" value="Earrings" checked>
<span></span>
Earrings
</label>
</div>
</div>
<h3 class="trigger">Material</h3>
<div class="catalog__filter-section" tabindex="0">
<div class="catalog__filter-inputs">
<label>
<input type="checkbox" name="material" value="Gold">
<span></span>
Gold
</label>
<label>
<input type="checkbox" name="material" value="Silver">
<span></span>
Silver
</label>
</div>
</div>
<h3 class="trigger">Collection</h3>
<div class="catalog__filter-section" tabindex="0">
<div class="catalog__filter-inputs">
<label>
<input type="checkbox" name="collection" value="Pink flamingo">
<span></span>
Pink flamingo
</label>
<label>
<input type="checkbox" name="collection" value="Dreams">
<span></span>
Dreams
</label>
</div>
</div>
<h3 class="trigger">Price</h3>
<div class="catalog__filter-section" tabindex="0">
<div class="catalog__filter-inputs">
<label>
<input type="checkbox" name="products" value="Necklaces">
<span></span>
Necklaces
</label>
</div>
</div>
</form>
</div>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium