slideToggle не работает для нескольких divs

Question

мой php выплескивает все мои машины в цикле, поэтому каждый автомобиль получает одинаковые идентификаторы и классы div, но различная информация МОЯ ПРОБЛЕМА: мой плагин работает только для одного и того же div, который является первым то потому что все они названы те же

, как я могу сделать эту функцию умна, чтобы знать, какой контент ДИВ должна скрыть или показать

проверить мой пример http://jsfiddle.net/S2HEw/

(function ($) { 
    $.fn.showHide = function (options) { 

    //default vars for the plugin 
     var defaults = { 
      speed: 1000, 
      easing: '', 
      changeText: 0, 
      showText: 'Show', 
      hideText: 'Hide' 

     }; 
     var options = $.extend(defaults, options); 

     $(this).click(function() { 
// optionally add the class .toggleDiv to each div you want to automatically close 
         $('.toggleDiv:hidden').slideUp(options.speed, options.easing); 
      // this var stores which button you've clicked 
      var toggleClick = $(this); 
      // this reads the rel attribute of the button to determine which div id to toggle 
      var toggleDiv = $(this).attr('rel'); 
      // here we toggle show/hide the correct div at the right speed and using which easing effect 
      $(toggleDiv).slideToggle(options.speed, options.easing, function() { 
      // this only fires once the animation is completed 
      if(options.changeText==1){ 
      $(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText); 
      } 
       }); 

      return false; 

     }); 

    }; 
})(jQuery); 



$(document).ready(function(){ 

    $('.show_hide').showHide({ 
     speed: 250, // speed you want the toggle to happen 
     easing: '', // the animation effect you want. Remove this line if you dont want an effect and if you haven't included jQuery UI 
     changeText: 1, // if you dont want the button text to change, set this to 0 
     showText: 'View',// the button text to show when a div is closed 
     hideText: 'Close' // the button text to show when a div is open 

    }); 

}); 

HTML, есть многие из этих единиц, все с тем же именем, и вот почему моя кнопка переключения выходит из строя,

<a class="show_hide" href="#" rel="#slidingDiv">View</a> 
      <div id="slidingDiv" class="toggleDiv" style="display: none;"> 
      <div class="right"> 
</div> 
</div> 

обратите внимание, что я не могу обновить свой цикл PHP, так что я на самом деле нужно найти способ для jquery, чтобы узнать, с каким div он работает, даже у всех их есть один и тот же идентификатор div? я могу php делать все большее число и добавлять его к классу, а затем на стороне jquery ?? увидеть это, где им застряло

я понятия не имею, как сделать эту работу динамически

Answer 1

У вас есть повторяющиеся идентификаторы для slidingDiv элементов. id элемента должен быть уникальным в документе

От док для id-attribure

id attribute задает уникальный идентификатор своего элемента (ID). Значение должно быть уникальным среди всех идентификаторов в элементе home subtree и должно содержать не менее одного символа. Значение не должно содержать space characters.

<!-- DIV 1--> 
<a class="show_hide" href="#" rel="#slidingDiv1">View</a> 
<div id="slidingDiv1" class="toggleDiv" style="display: none;"> 
    <div class="right"> 
     DIV 1 

    </div> 
</div> 
<!-- DIV 2--> 
<a class="show_hide" href="#" rel="#slidingDiv2">View</a> 
<div id="slidingDiv2" class="toggleDiv" style="display: none;"> 
    <div class="right"> 
     DIV 2 

    </div> 
</div> 
<!-- DIV 3--> 
<a class="show_hide" href="#" rel="#slidingDiv3">View</a> 
<div id="slidingDiv3" class="toggleDiv" style="display: none;"> 
    <div class="right"> 
     DIV 3 

    </div> 
</div> 

Кроме того, необходимо использовать: видимый вместо: скрытый

$('.toggleDiv:visible').slideUp(options.speed, options.easing); 

Демо: Fiddle