JQuery - проблема с селекторами (братьями и сестрами, родителями ...) - PullRequest
Новая
       39

JQuery - проблема с селекторами (братьями и сестрами, родителями ...)

1 голос
/ 24 января 2011

Я получил запрос Coldfusion, в котором результат сгруппирован по названиям стран. Нажав на этот, я пытаюсь открыть или закрыть список в стране. Но я не могу правильно работать с этими братьями и сестрами и с этими родителями. В результате, если я нажму на название страны, например на четвертое, закроются все дети, и на название трех стран, которые были и раньше. Может ли кто-нибудь помочь мне выбрать правильные селекторы? Заранее спасибо , Michel

код: 

<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>

Ответы [ 2 ]

1 голос
/ 24 января 2011

Вместо: 

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

Попробуйте: 

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

И, конечно, примените то же самое изменение к .fadeIn().Вы также можете посмотреть .fadeToggle() документы .

Вот (сокращенный) пример: http://jsfiddle.net/redler/5sqJz/. Хотя это не влияет на пример,по-видимому, вы устанавливаете начальное состояние этих строк сведений как скрытое.

0 голосов
/ 25 января 2011

Во всем этом использовании cfmodule, cfmodule может быть проблемой памяти.

Хотя я всегда рекомендую пользователям пробовать свои страницы в любом браузере и использовать букмарклет SelectorGadget на http://www.selectorgadget.com/

Это облегчает тестирование и проверку правильного селектора для нужд вашего приложения.

...