Блог

Главная - Вопросы по программированию - Почему мне нужно дважды нажать кнопку, чтобы эта функция JavaScript заработала?

Почему мне нужно дважды нажать кнопку, чтобы эта функция JavaScript заработала?

#javascript #function #if-statement

Вопрос:

Я пытаюсь заставить эту функцию изменить отображение на «активный» div при первом щелчке, а затем вернуться к «Страховке» при втором щелчке.

В настоящее время он не меняется на «активный» до второго нажатия кнопки, затем он вращается вперед и назад, как и должно быть.

Почему изначально требуется 2 клика? Как заставить его работать с первого нажатия кнопки?

 var timesClicked = 0;

function openDiv(evt, divName, divName2) {
  if (name1 === 'Insurance' amp;amp; timesClicked < 1) {
    evt.currentTarget.className  = " active";
  }

  var name1 = divName;
  var name2 = divName2;
  timesClicked  ;
  if (name1 !== 'Insurance' amp;amp; timesClicked > 1) {
    //        timesClicked = 0;
    //        openDiv(evt, 'Insurance', 'Insurance2');
    //        console.log("switch back");
    //        return;
    name1 = 'Insurance';
    name2 = 'Insurance2';
    evt.currentTarget.className.replace(" active", "");
    timesClicked = 0;
  }
  var i, tabcontent, tabcontent2, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  tabcontent2 = document.getElementsByClassName("tabcontent2");
  for (i = 0; i < tabcontent2.length; i  ) {
    tabcontent[i].style.display = "none";
    tabcontent2[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i  ) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

  document.getElementById(name1).style.display = "block";
  document.getElementById(name2).style.display = "block";
  if (timesClicked === 1) {
    evt.currentTarget.className  = " active";
  }

}

document.getElementById("defaultOpen").click(); 
 <button class="tablinks" onclick="openDiv(event, 'Insurance', 'Insurance2')" id="defaultOpen"></button>
<div class="dw12">
  <button class="tablinks" onclick="openDiv(event, 'Retiree-Medical', 'Retiree-Medical2')"><div class="tab---icon"><img class="tab-img" src="images/retiree-medical_icon.png" alt="Retiree Medical"/></div><div class="shadow-div"></div><p class="bold-title"><strong>RETIREE MEDICAL</strong></p><p class="small-title">CLICK FOR MORE</p></button>
</div>

Комментарии:

1. Вы тестируете if (name1 == 'Insurance' ...) , прежде чем назначить name1 .

2. Зачем вам это нужно var name1 = divName и var name2 = divName2 ? Почему бы просто не использовать name1 и name2 в качестве параметров функции?

3. вы можете использовать ` ‘ element.classList.toggle« для изменения активного класса

4. Это то, что вам нужно сделать, или вы были бы открыты для лучшего решения, которое даже не требовало бы никакого javascript?

5. @Barmar — Я переместил объявления «var name1» и name2 выше моего оператора if, но это не устранило проблему с двойным щелчком мыши.

Ответ №1:

Ваш подход слишком громоздок для того, что, как я думаю, он должен делать. На самом деле, если ваша единственная цель-переключить видимость элементов только с 2 возможными состояниями: включено или выключено, вы можете сделать это без какого-либо javascript, используя скрытый флажок и основываясь на его отображении состояния или скрытии определенных братьев и сестер с помощью CSS:

 #tab1:checked ~ #Retiree-Medical,
#tab1:checked ~ #Retiree-Medical2,
#tab1:not(:checked) ~ #Insurance,
/*note, you can't use #Insurance2 directly because it's not sibling of #tab1*/
#tab1:not(:checked) ~ .some-child #Insurance2,
/*or you can use * to make it more universal */
#tab1:not(:checked) ~ * .tab1toggle.checkedonly,
#tab1:checked ~ * .tab1toggle:not(.checkedonly) {
  display: none;
}

label {
  user-select: none;
  /* prevent text selection on double click */
}

label>button {
  pointer-events: none;
}

.div {
  display: block;
}

.red {
  background-color: pink;
  display: inline-block;
} 
 <div class="content">
  <!-- must be above any elements it controls -->
  <input id="tab1" type="checkbox" checked hidden>

  <!-- using label to redirect clicks to the checkbox -->
  <label class="dw12 div" for="tab1">
    <!-- to prevent this button from capturing clicks we must disable it in css via pointer-events style -->
    <button class="tablinks"><div class="tab---icon"><img class="tab-img" src="images/retiree-medical_icon.png" alt="Retiree Medical"/></div><div class="shadow-div"></div><p class="bold-title"><strong>RETIREE MEDICAL</strong></p><p class="small-title">CLICK FOR MORE</p></button>
  </label>
  <div id="Insurance">Insurance</div>
  <div class="some-child">
    <div class="another-child">
      <div id="Insurance2">Insurance2</div>
    </div>
  </div>
  <div id="Retiree-Medical">Retiree-Medical</div>
  <div id="Retiree-Medical2">Retiree-Medical2</div>
  <div class="red">
    <div class="tab1toggle checkedonly">generic div1 checked</div>
    <div class="tab1toggle checkedonly">generic div2 checked</div>
    <div class="tab1toggle checkedonly">generic div3 checked</div>
    <div>
      <div>
        <div>
          <div class="tab1toggle checkedonly">generic div4 checked, has multiple parents</div>
        </div>
      </div>
    </div>
    <div class="tab1toggle checkedonly">generic div5 checked</div>
    <div class="tab1toggle">generic div6</div>
    <div class="tab1toggle">generic div7</div>
    <div class="tab1toggle">generic div8</div>
    <div class="tab1toggle">generic div9</div>
    <div class="tab1toggle">generic div10</div>
  </div>
</div>
Метки: ,