2013-02-26 99 views
1

在下面的腳本中,我試圖傳遞一個對父容器的ID的引用,以便將slideToggle的範圍限制爲該元素的範圍子類匹配的子元素。jQuery動態傳遞元素的ID來限制範圍slideToggle()

如何更改要傳入ID的代碼?問題是'myID .extras'顯然不是正確的語法。

jQuery(document).ready(function() 
{ 
    jQuery(document).on('click','.toggleExtras', function(e){ 
     var myEl = jQuery(this).closest('.widget'); 
     var myID = jQuery(myEl).attr('id'); 
     jQuery('myID .extras').slideToggle(); 
     jQuery(this).text(function(el, old){ 
      return old == "Show Advanced Options" ? "Hide Advanced Options" : "Show Advanced Options"; 
     }); 
    }); 

}); 

HTML:

<div id="widget-43_my_box_cats-4" class="widget"> 
    <div class="widget-top"> 
     <div class="widget-title-action"></div> 
     <div class="widget-title"><h4>Widget Title<span class="in-widget-title"></span></h4></div> 
    </div> 

    <div class="widget-inside" style="display: block;"> 
     <form action="" method="post"> 
      <div class="widget-content"> 
       <p> 
        <label for="widget-my_box_cats-4-title">Title:</label> 
        <input class="widefat" id="widget-my_box_cats-4-title" name="widget-my_box_cats[4][title]" type="text" value=""> 
       </p> 

       <fieldset><legend><span class="toggleExtras">Hide Advanced Options</span></legend> 

回答

2

爲什麼獲得ID,並做了很多拐彎抹角的,當你能夠找到直接的元素:

jQuery(document).ready(function() { 
    jQuery(document).on('click','.toggleExtras', function(e){ 

     jQuery(this).closest('.widget').find('.extras').slideToggle(); 

     jQuery(this).text(function(el, old){ 
      return old == "Show Advanced Options" ? "Hide Advanced Options" : "Show Advanced Options"; 
     }); 
    }); 
}); 
+0

+ 1甜蜜和光明! – RegEdit 2013-02-26 13:55:55

0

jQuery('myID .extras').slideToggle();應該jQuery('#myID .extras').slideToggle();

對於id selecor您需要使用前綴#myIDelement selector在那裏將尋找與標籤名稱的元素myID