代码之家 › 专栏 › 技术社区 › Maxswift

JS函数运行了两次

custom-data-attribute iteration if-statement javascript

Maxswift · 技术社区 · 2 年前

我有一个js函数,它应该根据当前值更改html数据属性值的值。因此,换句话说,它的作用应该类似于在0和1 onclick之间进行切换。无论如何,根据记录当前状态,我注意到每次单击都会记录两次该状态。我希望在检查和更改当前值后,函数应该结束。

const accordionTabs = Array.from(document.getElementsByClassName('custom-faq-accordion-button-wrapper'));

accordionTabs.forEach(accordionTab => {
  accordionTab.addEventListener('click', function checkTabState() {
    let state = accordionTab.getAttribute('data-State');
    console.log(state);
    if ( state == "1" ) {
       accordionTab.setAttribute("data-State", "0");
    } else {
       accordionTab.setAttribute("data-State", "1");
    }
  });
});

#custom-faq-accordion {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #FFF6E7;
  padding: 60px 0 230px;
  min-height: 75vh;
}
#custom-faq-accordion-wrapper {
  width: 1200px; 
}
#custom-faq-accordion-title {
  padding-bottom: 60px; 
}

.accordion input[name=panel] {
  display: none;
}
.accordion label {
  position: relative;
  display: block;
  padding: 0.2em 1em 0.5em 1.2em;
  font-size: 1.5em;
  color: black;
  cursor: pointer;
  transition: all 0.7s cubic-bezier(0.865, 0.14, 0.095, 0.87);
}
.accordion label::after {
  font-family:"obviously-wide";
  font-size: 39px;
  content: "+";
  position: absolute;
  right: 1em;
  width: 1em;
  height: 1em;
  color: #000;
  text-align: center;
  border-radius: 50%;
  padding-bottom: 5px;
  padding-right: 0.5em;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: 0.8em;
}
.accordion label:hover {
  color: black;
}
.accordion input:checked + label {
  color: black;
}
.accordion input:checked + label:after {
  font-family:"obviously-wide";
  font-size: 39px;
  content: "-";
  line-height: 0.8em;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 5px;
}
.accordion .accordion__content {
  overflow: hidden;
  height: 0px;
  position: relative;
  padding: 0 2.5em 0 3em;
  color: black ;
  transition: height 0.4s cubic-bezier(0.865, 0.14, 0.095, 0.87);
}

.accordion .accordion__content .accordion__header {
  padding: 1em 0;
}
.accordion .accordion__content .accordion__body {
  font-size: 0.825em;
  line-height: 1.4em;
}

/* 
* Size Variations
*/
input[name=panel]:checked ~ .accordion__content.accordion__content--small {
  height: auto;
  padding-bottom: 30px;
  padding-left: 7em;
  width: 95%;
}

input[name=panel]:checked ~ .accordion__content.accordion__content--med {
  height: auto;
}

input[name=panel]:checked ~ .accordion__content.accordion__content--large {
  height: auto;
}

.custom-faq-accordion-button-wrapper {
 position: relative;
 width: 100%;
}

.border-black {
  box-shadow: 0 0 0 1px #000;
  border-collapse: seperate;
  border-spacing: 10px;
  border-radius: 59px;
  background-color: #fff6e7;
  margin-top: 5px;
  margin-bottom: 25px;
  position: relative;
  z-index: 2;
  will-change: transform;
}

.border-black:hover {
 animation: pressin 0.3s forwards;
}

.custom-faq-accordion-button-shadow.custom-faq-accordion-button-shadow.custom-faq-accordion-button-shadow  {
 position: absolute;
 bottom: -6px;
 height: 60px;
 width: 100%;
 border-radius: 110px;
 background-color: #000;
 z-index: 1;
 display: block;  
}

.border-black label {
  font-family: vulfSans_bold;
  color: black;
  font-size: 20px;
  line-height: 43px;
  padding-top: 10px;
}

@keyframes pressin {
  0%   {transform: translateY(0px);}
  100% {transform: translateY(6px);}
}

<section id="custom-faq-accordion">
  <div id="custom-faq-accordion-wrapper">
    <h3 id="custom-faq-accordion-title" class="obviously-wide-black-90">FAQ</h3>
  <div class="accordion">
  <div class="custom-faq-accordion-button-wrapper" data-State="0">
    <div class="border-black">
      <input type="checkbox" name="panel" id="panel-{{ block.settings.accordion_position }}">
      <label for="panel-{{ block.settings.accordion_position }}">Titel</label>
      <div class="accordion__content accordion__content--small">
        <div class="accordion__body obviously-regular-25">lorem ipsum</div>
      </div>
    </div>
    <div class="custom-faq-accordion-button-shadow"></div>
  </div>
  <div class="custom-faq-accordion-button-wrapper" data-State="0">
    <div class="border-black">
      <input type="checkbox" name="panel" id="panel-{{ block.settings.accordion_position }}">
      <label for="panel-{{ block.settings.accordion_position }}">Titel</label>
      <div class="accordion__content accordion__content--small">
        <div class="accordion__body obviously-regular-25">lorem ipsum</div>
      </div>
    </div>
    <div class="custom-faq-accordion-button-shadow"></div>
  </div>
  <div class="custom-faq-accordion-button-wrapper" data-State="0">
    <div class="border-black">
      <input type="checkbox" name="panel" id="panel-{{ block.settings.accordion_position }}">
      <label for="panel-{{ block.settings.accordion_position }}">Titel</label>
      <div class="accordion__content accordion__content--small">
        <div class="accordion__body obviously-regular-25">lorem ipsum</div>
      </div>
    </div>
    <div class="custom-faq-accordion-button-shadow"></div>
  </div>
</div>
  </div>
</section>

1 回复 | 直到 2 年前

R4ncid 2 年前

您的代码运行良好

问题可能出在代码的另一部分

const accordionTabs = Array.from(document.getElementsByClassName('custom-faq-accordion-button-wrapper'));

accordionTabs.forEach(accordionTab => {
  accordionTab.addEventListener('click', e => {
    const state = e.target.getAttribute('data-State');

    const nextState = (Number(state) + 1) % 2
    console.log({
      state,
      nextState
    })

    e.target.setAttribute("data-State", nextState);


  });
});

.custom-faq-accordion-button-wrapper {
  cursor: pointer;
  border: 1px solid black;
  padding: 10px 5px;
  margin-bottom: 5px;
}

<div class="custom-faq-accordion-button-wrapper" data-State="0">1</div>
<div class="custom-faq-accordion-button-wrapper" data-State="0">2</div>