Wybieranie elementów i akcja na nich

0

Zastanawiam się dlaczego ten kod nie działa:

 function toggleDiv(up){
        var items = $('tr[name="chestPain"]');

        for(a=0;a<items.length;a=a+1)
        {
         items[a].slideUp("slow");
        }
       
    }

{EDIT}

Dodatkowo po pierwszym wywołaniu

items[a].slideUp("slow"); 

funkcja przerywa działanie.

{/EDIT}
Jak rozumiem

 var items = $('tr[name="chestPain"]');

wypełnia tablicę elementami (długość tablicy w moim przypadku wynosi 6). Później chciałbym wywołać na elementach funkcję slideUp() ażeby je zwinąć jednak jedyne co dostaje to... po głowie :)

Czy ma ktoś pomysł dlaczego tak się dzieje?

0

Widzę, że używasz firefoksa. Pobierz sobie dodatek Firebug, albo korzystaj z konsoli błędów (CTRL+SHIFT+J). Wtedy będziesz widział konkretnie jakie błędy występują.

0

Nie mam odpowiedzi na to pytanie (nie widzę HTMLa), ale jak już korzystasz z jQuery to ułatwiaj sobie życie :)

$('tr[name="chestPain"]').each(function(i, v) {
  $(this).slideUp('slow');
});

Upewnij się, że Twój CSS tak styluje wiersze, że da się im zmieniać wysokość, bo dla domyślnych stylów to działa jak show/hide.

0
$('tr[name=chestPain]').slideUp();

Oczywiscie masz elementy <tr> posiadajace atrybut name? Czyli <tr name="chestPain">?

BTW: rozwaz uzycie <td> zamiast <tr>. Nie uzywalem nigdy slideUp() na elemencie <tr> - nie wiem czy to zadziala...

0

Tak mam takie elementy. Po wywołaniu wybrania długość tablicy jest 6 więc wybiera elementy. Po wypisaniu ich przez items[n].toString() dostaje odpowiedź, że jest to Row Element. Więc teoretycznie wybiera.

Kod htmla wrzucę jak wrócę z uczelni.


Problem rozwiązałem robiąc wybór po klasach

$('.chestPain').slideUp("slow")

ale i tak możemy kontynuować, żeby znaleźć błąd :)

0

Sam miałem kiedyś z tym problem. Rozwiązałem go opakowując TR-a tagiem TBODY i wykonując akcję slideUp na TBODY. Na TR-ach nie da się tego zrobić. Przynajmniej wtedy nie znalazłem informacji jak to zrobić.

1

items[a] nie ma funkcji slideUp i skrypt kończy działanie z błędem (elementy listy items są zwykłymi elementami typu HTMLElement a nie obiektek jQuery czy czego tam używasz)
Robisz tak : $(items[a]).slideUp("slow"); i wszystko slicznie śmiga (chaba że jeszcze coś napsułeś)

0

@RFabianski Dzięki za odpowiedź :)

@Adam Boduch działa na <tr>ach bez problemu. Przynajmniej w wersji jQuery której używam (1.5.1).

Dzięki za pomoc. a Tu HTML który wcześniej obiecałem:

 <h2 align="center">EWBQ form</h2>
                <h3 align="center">This is the first page </h3>
                <h3 align="center"><%= session.getAttribute("userName")%>, please enter information in the fields and click "Continue"</h3>
                <br>
                <form  action="PatientServlet" name="ewbqForm" onsubmit="return validateForm(1)">
                      <table>
                        <tr>
                            <td class="question">Today's Date:</td>
                            <td colspan="2"><input size="18"  type="text" readonly name="submitdate" value="<%= new Date()%>"></td>
                        </tr>
                        <tr>
                            <td class="main_question">Heart Attack:</td>
                            <td> Yes <input type="radio" name="heartAttack" value="Yes" onclick="toggleDiv('.heartAttackDateTr','down')"/></td>
                            <td> No <input type="radio" name="heartAttack" value="No" onclick="toggleDiv('.heartAttackDateTr','up'),noHeartAttack()"/></td>
                        </tr>
                        <tr class="heartAttackDateTr">
                             <td class="question">Heart Attack date:</td>
                             <td><input size="4"  type="text" name="heartAttackDate" value="<%= heartProblemsBean.getHeartAttackDate()%>"></td>
                        </tr>

                        <tr>
                            <td class="question">Palpitations/ Irregular heart beat/ Black out:</td>
                            <td>Yes<input type="radio" name="palpitation" value="Yes"/></td>
                            <td> No <input type="radio" name="palpitation" value="No"/></td>
                        </tr>
                        <tr>
                            <td class="question">Heart Murmur:</td>
                            <td> Yes <input type="radio" name="heartMurmur" value="Yes"/></td>
                            <td> No <input type="radio" name="heartMurmur" value="No"/></td>
                        </tr>
                        <tr>
                            <td class="question">Heart valve replacement/ Bypass Surgery:</td>
                            <td> Yes <input type="radio" name="valveReplacement" value="Yes"/></td>
                            <td> No <input type="radio" name="valveReplacement" value="No"/></td>
                        </tr>
                        <tr>
                            <td class="question">Do you have a Pacemaker:</td>
                            <td> Yes <input type="radio" name="paceMaker" value="Yes"/></td>
                            <td> No <input type="radio" name="paceMaker" value="No"/></td>
                        </tr>
                        <tr>
                            <td class="question">Swollen Legs:</td>
                            <td> Yes <input type="radio" name="swollenLegs" value="Yes"/></td>
                            <td> No <input type="radio" name="swollenLegs" value="No"/></td>
                        </tr>
                        <tr>
                            <td class="question">Do you need to use more than 2 pillows when lying flat:</td>
                            <td> Yes <input type="radio" name="morethanTwoPillows" value="Yes"/></td>
                            <td> No <input type="radio" name="morethanTwoPillows" value="No"/></td>
                        </tr>
                        <tr>
                            <td class="main_question">Chest Pain/Angina:</td>
                            <td> Yes <input type="radio" name="chestPainAngina"  value="Yes" onclick="toggleDiv('.chestPainTr','down');"/></td>
                            <td> No <input type="radio" name="chestPainAngina" value="No"  onclick="toggleDiv('.chestPainTr','up')"/></td>
                        </tr>
                        <tr class="chestPainTr">
                            <td class="question">Pain caused only by very effortful activity:</td>
                            <td> Yes <input type="radio" name="painCausedByEffortfulActivity" value="Yes"/></td>
                            <td> No <input type="radio" name="painCausedByEffortfulActivity" value="No"/></td>
                        </tr>
                        <tr class="chestPainTr">
                            <td class="question">Pain caused by walking fast,climbing stairs, emotional stress:</td>
                            <td> Yes <input type="radio" name="painCausedByEmotionalStress" value="Yes"/></td>
                            <td> No <input type="radio" name="painCausedByEmotionalStress" value="No"/></td>
                        </tr>
                        <tr class="chestPainTr">
                            <td class="question">Pain caused by climbing one flight of stairs:</td>
                            <td> Yes <input type="radio" name="painCausedByClimbingOneFlightOfStair" value="Yes"/></td>
                            <td> No <input type="radio" name="painCausedByClimbingOneFlightOfStair" value="No"/></td>
                        </tr>
                        <tr class="chestPainTr">
                            <td class="question">Pain occurs on mildest effort or at rest?:</td>
                            <td> Yes <input type="radio" name="painAtRest" value="Yes"/></td>
                            <td> No <input type="radio" name="painAtRest" value="No"/></td>
                        </tr>
                        <tr class="chestPainTr">
                            <td class="question">Has the Pain become more intense/frequent recently?</td>    
                            <td> Yes <input type="radio" name="painIntenseRecent" value="Yes"/></td>
                            <td> No <input type="radio" name="painIntenseRecent" value="No"/></td>
                        </tr>
                        <tr class="chestPainTr">
                            <td class="question">Pain Occurences:</td>
                            <td colspan="2"><select name="painOccurences">
                                    <option>daily</option>
                                    <option>weekly</option>
                                    <option>at night</option>
                                    <option>other</option>
                                </select></td>
                        </tr>
                        </table>
                        <span><input type="submit" value="Save" name="submit"></span>
                        <span><input type="hidden" value="1" name="ewbqSection" /></span>
                </form>

I kod JavaScript do zwijania:

function toggleDiv(name,up)
{
    if(up=="up")
        $(name).slideUp("slow");
    else
        $(name).slideDown("slow");

}
0

Dla fanów jednolinijkowców [diabel]

$(name)[up=='up'?'slideUp':'slideDown']('slow');
0

Można krócej:

$(name).slideToggle('slow');
 

1 użytkowników online, w tym zalogowanych: 0, gości: 1