Как добавить уникальный номер в каждую выпадающую вкладку с помощью Javascript

Question

Как добавить уникальный номер в каждую выпадающую вкладку с помощью Javascript

1

У меня есть раскрывающийся список, в котором каждый элемент закрыт, пока вы не нажмете этот конкретный элемент.

HTML:

<div id="dropdowntabs">
  <h2 class="drop">
    <a id="tabhead1" href="javascript:dropdowntabs('droptab1');">MAIN TITLE</a>
  </h2>
  <div name="droptab" class="droptab" id="droptab1" style="display:none;">
    <p>TEXT TO SHOW</p>
  </div>
</div>

Javascript:

function dropdowntabs(selectedtab) {
   $('div[name|="droptab"]').each(function(index) {
      if ($(this).attr("id") == selectedtab) {
         $(this).show(200);
      }
      else {
         $(this).hide(600);
      }
   });
}

Каждому дрейфуту присвоено другое число. Это хорошо работает в HTML, но я хотел использовать его в Wordpress, и поскольку я не могу вручную назначить номер каждой вкладке, все они открываются при нажатии.

Может кто-нибудь объяснить, как я могу получить число, которое будет добавляться с шагом автоматически.

Очень ценится, Джейсон.

Jason 28 окт. 2017, в 16:47

Источник

Теги:

javascript

2 ответа

0

У вас уже был почти весь код: посмотрите на пример:

В этом примере нам больше не нужен id, мы используем соответствующие индексы для выбора и отображения.

//select on index not on ID

function dropdowntabs(selectedtab) {
  //select the index number comparing the clicked element to it nodelist
  $('div.droptab').each(function(index) {
    if ($(this).index('div.droptab') == selectedtab) {
      $(this).show(200);
    } else {
      $(this).hide(600);
    }
  });
}

//Assign the click events
$('h2.drop > a').on("click", function(e) {
  //select the index number comparing the clicked element to it nodelist
  dropdowntabs($(this).index("h2 > a"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dropdowntabs">
  <a></a>
  <!-- assign click handlers through code -->
  <h2 class="drop"><a id="tabhead1" href="javascript:void(0);">MAIN TITLE</a> <a id="tabhead2" href="javascript:void(0);">MAIN TITLE 2</a></h2>
  <div name="droptab" class="droptab" style="display:none;">
    <p>TEXT TO SHOW</p>
  </div>
  <div name="droptab" class="droptab" style="display:none;">
    <p>TEXT TO SHOW</p>
  </div>
</div>

Mouser 28 окт. 2017, в 13:31

Ещё вопросы

charlietfl · Accepted Answer · 2017-10-28T13-55-00.000Z

Вместо этого используйте общие траверсы. Внутри обработчика события this элемент, в котором происходит событие и начинается с этого элемента, вы можете перейти к соответствующему соответствующему элементу

$('.drop a').click(function() {
  var $content = $(this).parent().next().show(200)
  $('.droptab').not($content).hide(200);
});

.droptab {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dropdowntabs">
  <h2 class="drop">
    <a>MAIN TITLE</a>
  </h2>
  <div class="droptab">
    <p>MAIN TITLE CONTENT</p>
  </div>
  <h2 class="drop">
    <a>SECOND TITLE</a>
  </h2>
  <div class="droptab">
    <p>SECOND TITLE CONTENT</p>
  </div>
</div>