Попытка динамически расширять разные div с помощью одной функции

Я пытаюсь динамически расширять/сворачивать несколько div с одним и тем же кодом....

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

            $('span').toggle(
    function() {
$('#albumholder').slideToggle(600);
    $(this).html('-');},
    function() {
$('#albumholder').slideToggle(600);
    $(this).html('+');}

    );

This code works to expand 1 div... but assume i have a divs 

#downloadholder
#linksholder
etc...
How can i achieve the same effect with the same code? Thanks!

ИЗМЕНИТЬ

Стоит отметить, что мне нужно, чтобы каждый div переключался независимо. Если я нажму кнопку «плюс» в диапазоне, влияющем на #albumberholder, он не должен расширять #downloadholder или #linksholder.


javascript html toggle jquery slidetoggle
person Matt Nathanson    schedule 08.06.2010    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Два пути -

добавить их в селектор

$('#downloadholder, #linksholder')

или добавить класс к этим элементам

$('.toExpand')

<div id="downloadholder" class="toExpand" />
<div id="linksholder" class="toExpand" />

Перечитывая ваш вопрос, возможно, вы хотите получить элемент div next?

$('#yourSpanElement').click(function() {
    $span = $(this);
    $yourDiv = $span.next('div');
   // do your magic :)
});

ваш код обновлен:

$('span').toggle(
    function() {
      var $span = $(this);
      $span.next('div').slideToggle(600);
      $span.html('-');
    },      
    function() {
      var $span = $(this);
      $span.next('div').slideToggle(600);
      $span.html('+');
    }
 );

вы также можете проверить появление следующего div:

$('span').click(function() {
  var $span = $(this);
  var $nextDiv = $span.next('div');
  if( $nextDiv.is(':visible') ) {
     $nextDiv.slideUp(600);
     $span.html('+');
  }else {
     $nextDiv.slideDown(600);
     $span.html('-');
  }
});
person Dan Heberden    schedule 08.06.2010
comment
это работает, но это влияет на оба div... если я щелкну любой из них, они оба переключатся... мне нужно, чтобы каждый из них работал независимо.. спасибо за вашу помощь до сих пор - person Matt Nathanson; 09.06.2010
comment
Обновил ответ, когда вы комментировали - что-то в этом роде? вы хотите следующий div после диапазона? - person Dan Heberden; 09.06.2010
comment
да, я хотел бы сказать, хорошо ... у меня есть этот класс span, если я щелкну его, я хочу, чтобы он расширил СЛЕДУЮЩИЙ div, потому что во всех случаях div, который я хочу расширить, будет сразу после - person Matt Nathanson; 09.06.2010
comment
тогда мой ответ должен вам подойти :) - person Dan Heberden; 09.06.2010

arrow_upward
0
arrow_downward

Сделайте вам htmlr что-то вроде этого.

<span toggletarget="downloadholder>+</span>
<div id="downloadholder"></div>

Затем сделайте свой javascript

$('span[toggletarget]').click(function () {$(this).toggle(
function() {
    $("#"+$(this).attr("toggletarget")).slideToggle(600);
    $(this).html('-');},
function() {
$('#albumholder').slideToggle(600);
$(this).html('+');}
);});
person Jonathan Park    schedule 08.06.2010
comment
Это может быть, но к черту их :) Я бы предпочел, чтобы w3c злился на меня, а не делал мой код менее читаемым. Я придумываю свои собственные атрибуты, потому что так проще управлять с сайта сервера. Если весь мой javascript основан на данных, размещенных в html, я могу быстро и легко предварительно заполнить данные сервера. - person Jonathan Park; 09.06.2010