JQuery - 選擇器（兄弟姐妹，父母...）的問題

我得到了一個coldfusion查詢，其中結果按國名分組。點擊這個按鈕，我嘗試打開或關閉該國家下的列表。但我無法正確地與這位兄弟姐妹和這位父母一起工作。結果是，如果我點擊一個國家名稱，例如第四個國家，它將關閉所有兒童，以及之前的三個國家名稱。有人可以幫我選擇正確的選擇器嗎？謝謝你在前進，米歇爾JQuery - 選擇器（兄弟姐妹，父母...）的問題

代碼：

<script type="text/javascript" language="javascript"> 
    $(document).ready(function(){ 
     var toggleMinus = '<cfoutput>#variables.strWebAddress#</cfoutput>/images/bullet_toggle_minus.png'; 
     var togglePlus = '<cfoutput>#variables.strWebAddress#</cfoutput>/images/bullet_toggle_plus.png'; 
     var $subHead = $('table#categorylist tbody th:first-child'); 
     $subHead.prepend('<img src="' +toggleMinus+ '" alt="collapse this section" />&nbsp;'); 
     $('img', $subHead).addClass('clickable').click(function(){ 
      var toggleSrc = $(this).attr('src'); 
      if(toggleSrc == toggleMinus){ 
       $(this).attr('src',togglePlus).parents('.country').siblings().fadeOut('fast'); 
      }else{ 
       $(this).attr('src',toggleMinus).parents('.country').siblings().fadeIn('fast'); 
      } 
     }); 
    }); 
</script> 

<table width="95%" border="0" cellspacing="2" cellpadding="2" align="center id="categorylist"> 
<thead> 
    <tr> 
     <th class="text3" width="15%"> 
      <cfmodule template="../custom_tags/get_message.cfm" keyName="L_ACTOR_CODENUMBER"> 
     </th> 
     <th class="text3" width="15%"> 
      <cfmodule template="../custom_tags/get_message.cfm" keyName="L_ACTOR_CODE"> 
     </th> 
     <th class="text3" width="55%"> 
      <cfmodule template="../custom_tags/get_message.cfm" keyName="L_ACTOR_NAME"> 
     </th> 
     <th class="text3" width="15%"> 
      <cfmodule template="../custom_tags/get_message.cfm" keyName="L_ACTIVE"> 
     </th> 
    </tr> 
</thead> 
<tbody id="content"> 
<cfoutput query="qryCategoryUrl" group="country_name" groupcasesensitive="false"> 
    <tr class="country"> 
     <th style="font-weight:bold; text-align:left;" colspan="4">#country_name#</th> 
    </tr> 
<cfoutput> 
    <tr> 
     <td valign="top" class="text3">#Replace(ACTOR_CODENUMBER, Chr(13) & Chr(10), "<br>", "ALL")#&nbsp;</td> 
     <td valign="top" class="text3">#Replace(ACTOR_CODE, Chr(13) & Chr(10), "<br>", "ALL")#&nbsp;</td> 
     <td valign="top" class="text3">#Replace(ACTOR_NAME, Chr(13) & Chr(10), "<br>", "ALL")#&nbsp;</td> 
     <td valign="top" class="text3"><cfmodule template="../custom_tags//get_message.cfm" keyName="#ACTIVE_display(qryCategoryUrl.ACTIVE)#"></td> 
    </tr> 
</cfoutput> 
</cfoutput> 
</tbody> 
</table>

來源

2011-01-24 Michel

這是有點難以複製，因爲你有集成的模板和服務器端代碼。你能用生成的HTML更新代碼示例嗎？這樣你的情況就可以被複制。 – 2011-01-24 14:51:57

相反的：

.parents('.country').siblings().fadeOut('fast');

試試這個：

.closest('.country').nextUntil('.country').fadeOut('fast');

和當然，採用同樣的變化到.fadeIn()。您也可以查看.fadeToggle()^docs。（縮小）示例：http://jsfiddle.net/redler/5sqJz/。儘管它不會影響該示例，但大概您會將這些詳細信息行的初始狀態設置爲隱藏狀態。

來源

2011-01-24 15:06:10

謝謝Ken，這是解決方案。現在只有一個小問題，我第一次點擊兩下來切換它。你知道爲什麼嗎？ – Michel 2011-01-24 15:14:27

woah all that cfmodule usage，cfmodule can be a memory hog。

雖然我總是建議是，人們嘗試他們的任何瀏覽器頁面，並使用SelectorGadget書籤在http://www.selectorgadget.com/

這使得它更容易測試和檢查正確的選擇，爲您的應用需求。

來源

2011-01-25 14:58:01 crosenblum

JQuery - 選擇器（兄弟姐妹，父母...）的問題

回答

相關問題