jQuery Toggle с несколькими уникальными DIV?

Я использую переключатель jQuery со ссылкой и div. В итоге у меня будет ок. 50 div, которые я хочу переключить, и вместо того, чтобы создавать новую функцию для каждого, есть ли способ создать класс и прочитать уникальные идентификаторы для каждого div? (если это имеет смысл)

Например, у меня будет A1, A2, A3, B1, B2, B3 и т. д.

  $(document).ready(function() {

  $('#slickbox').hide();


  $('a#slick-toggleA1').click(function() {
    $('#A1').toggle(300);
    return false;
  });



});

toggle jquery
person tony noriega    schedule 30.03.2010    source источник
comment
вы должны записать свою html-разметку   -  person Sarfraz    schedule 30.03.2010

Ответы (6)


arrow_upward
3
arrow_downward

HTML

<a class="clicker" href="#box1">Box 1</a>

<div class="coolbox" id="box1">I'm hidden!</div>

JavaScript

$('.coolbox').hide();

$('.clicker').click(function(event){
    event.preventDefault();
    $($(this).attr('href')).toggle(300);
});
person orokusaki    schedule 30.03.2010
comment
Я думаю, он хочет щелкнуть ссылку, которая затем переключает ‹div› - person Quasipickle; 30.03.2010
comment
@Pickle, да, я отредактировал это. Сначала я не заметил этого в своей спешке. - person orokusaki; 30.03.2010
comment
Понижение правильного ответа всех остальных для продвижения вашего - неприемлемое поведение, я бы посоветовал вам переосмыслить это. Проголосовал за все остальные ответы, чтобы исправить это. - person Nick Craver; 30.03.2010
comment
@NickCraver извините за ответ, опоздавший почти на 5 лет. Я проголосовал за оба этих ответа, потому что они использовали return false; вместо использования event.preventDefault();, последний из которых также приводит к запуску event.stopPropagation();, что, скорее всего, не нужно, и нарушит обработчики событий, ожидающие события для каждого клика. на странице (например, скрипты отслеживания и т. д.). Только не думайте, что все тролли. - person orokusaki; 20.01.2015
comment
@orokusaki посмотрите на исходный вопрос - вы делаете предположения (вне вопроса) о том, что нужно, а что нет. Например, может быть, он делает это явно, чтобы не всплывать. Вы также вносите изменение, даже не объясняя, почему вы внесли это изменение. - person Nick Craver; 20.01.2015
comment
@NickCraver, дайте мне посмотреть, понимаю ли я: Только обращение к точному вопросу без добавления дополнительных функций делает предположения. - person orokusaki; 29.01.2015

arrow_upward
3
arrow_downward

вы можете перебирать упакованные наборы с помощью .each():

$('div').each(function(i){
  $(this).toggle(300);

});

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

person jAndy    schedule 30.03.2010

arrow_upward
2
arrow_downward

Итак, давайте добавим класс slick-toggle к вашим a тегам. и давайте изменим их id'to something more definitively parseable -slick-toggle-$ID`, где $ID — это идентификатор div для переключения. затем мы делаем это в $.ready...

$('a.slick-toggle').click(function(){
   var divId = '#'+$(this).attr('id').split('-').pop();
   $(divId).toggle();
   return false;
});
person prodigitalson    schedule 30.03.2010

arrow_upward
2
arrow_downward

вы можете использовать другой селектор для переключения div. Например, класс или пользовательский атрибут

$('.clicker').click(function(){
  $('[toggeled]').toggle(300);
  return false;
}

имея в виду следующую разметку

<div class="clicker">Click Me</div>
<div id="first" toggled="true">First to hide</div>
<div id="second" toggled="true">second to hide</div>
<div id="third" toggled="true">third to hide</div>
person vittore    schedule 30.03.2010

arrow_upward
1
arrow_downward

Если вы дадите своим ссылкам класс и используете href следующим образом:

<a class="opener" href="#A1">Open A1</a>
<div id="A1">Content here</div>

С этим jQuery:

$('a.opener').click(function() {
  $(this.href).toggle(300);
  return false;
});

Если javascript был отключен, якоря по-прежнему будут переходить к div на странице.

person Nick Craver    schedule 30.03.2010
comment
Не уверен, почему вы получаете меньше голосов за это. Это хорошее решение, поскольку оно будет деградировать. +1 от меня. - person prodigitalson; 30.03.2010

arrow_upward
0
arrow_downward

Дайте ссылке класс и вставьте идентификатор div, который вы хотите переключить, в атрибут «rel» — это даже соответствует стандартам.

Тогда ваша функция может выглядеть так:

$('a.specialClass').click(function(){
  $('#'+$(this).attr('rel')).toggle(300);
  return false;
}
person Quasipickle    schedule 30.03.2010