Forum PHP.pl > [JavaScript]dynamiczne pozycjonowanie elementu

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript]dynamiczne pozycjonowanie elementu

Mrowek

23.05.2009, 10:31:30

Mam taki przykladowy kod:

[HTML] pobierz, plaintext 
<html>
<head>
</head>
<body>
<div class="badania"><div class="otwBadania">Badania</div></div>
    <div class="poszczBadania" id="pb2">
        <div class="zamk"></div>
        <div class="bad" id="b8">czas protrombinowy (PT+INR)</div>
        <div class="bad" id="b9">czas rekalcynacji</div>
        <div class="bad" id="b10">fibrynogen</div>
        <div class="bad" id="b11">czas koalinowo-kefalinowy (APTT)</div>
    </div>
    <div class="poszczBadania" id="pb3">
        <div class="zamk"></div>
        <div class="bad" id="b12">badanie ogólne z osadem</div>
        <div class="bad" id="b13">badanie ogólne bez osadu</div>
        <div class="bad" id="b14">Białko z dobowej zbiórki moczu (z DZM)</div>
    </div>
    </body>
</html>
[HTML] pobierz, plaintext

Kod

                $("#b1").click(function (){
                     var bad; var otw;
                     otw = document.getElementByClassName('otwBadania');
                     bad = document.getElementById('b1');
                     newBad($(this).text(), 'b1', otw);
                 });

Kod

                 function newBad(nazw, name, otw) {
     var my_div = document.createElement('div');
     my_div.id = 'a' + name;
     my_div.innerHTML = nazw;
     document.otw.appendChild(my_div);

}

a pytanie brzmi jak poprawic kod aby nowopowstaly div powstawal w divie otwBadania?
probowalem za 'body' w 'document.body.appendChild(my_div)' wstawic zmienna 'otw' ale nic to nie dalo;]

singles

23.05.2009, 11:33:46

Z tego co widzę, to w części skryptu używasz jQuery - przynajmniej na to wygląda. Dlaczego nie zaprzęgnąć go do zrobienia reszty? Poszukaj w manualu jQuery: append, appendTo, prepend, prependTo i wybierz odpwiednie.

Kod

$('.otwBadania).append($("<div/>").attr({id: 'idDiva'}).html('tresc diva'));

Powyższe na szybko, bo się spieszę - mam nadzieję że pomoże.

BTW. Zastanów się, czy div otwarte badania nie powinien mieć id zamiast odnoszenia sie do niego po nazwie klasy - obecnie gdy masz jeden taki element zadziala, niewiadomo co bedzie potem.

kamil4u

23.05.2009, 15:19:13

Cytat

a pytanie brzmi jak poprawic kod aby nowopowstaly div powstawal w divie otwBadania?

Zakładając, że kod jest poprawny(nie znam jQuery, a tym bardziej pomieszany z JS) to tak:
-

Cytat

otw = document.getElementByClassName('otwBadania');

W JS nie ma czegoś takiego jak document.getElementByClassName (mam nadzieję, że sobie ją napisałeś) i jak już to 's' brakuje Ci w słowie Element powinno być Elements - bo funkcja ma zwracać elementy o podanej klasie
- jak już wiemy, że funkcja zwraca elementy, a nie element możemy łatwo spostrzec, że tutaj:

Cytat

newBad($(this).text(), 'b1', otw);

przesyłasz tablicę zamiast referencji do elementu
- tak więc podmień

Cytat

otw = document.getElementByClassName('otwBadania');

Cytat

otw = document.getElementsByClassName('otwBadania')[0];

- 0 oznacza pierwszy element o podanej klasie.

Mój post może być bezwartościowy, gdy napisałeś funkcję, która pobiera tylko 1 element.

erix

23.05.2009, 15:37:05

I jest bezwartościowy, jeśli chodzi o IE.

Kod

otw = $('.otwBadania');

Cytat

Powyższe na szybko, bo się spieszę - mam nadzieję że pomoże.

Jeśli masz tylko jeden atrybut do modyfikacji, nie trzeba używać JSON jako argumentu. [;

kamil4u

23.05.2009, 15:42:11

Cytat

I jest bezwartościowy, jeśli chodzi o IE. tongue.gif

Nie rozumiem - da się napisać funkcję getElementsByClassName dla wszystkich przeglądarek - dla IE też!

erix

23.05.2009, 15:53:06

Owszem, ale wymaga to "sporej" ilości kodu. A ma przecież jQuery załadowane, to po co robić coś dwa razy?

kamil4u

23.05.2009, 15:58:05

Cytat

Owszem, ale wymaga to "sporej" ilości kodu. A ma przecież jQuery załadowane, to po co robić coś dwa razy?

Np. dla szybkości

- dobra tu nie ma to znaczenia, ale zdarzało mi się robić skrypty, gdzie walczyłem o każdą sekundę

singles

24.05.2009, 16:47:33

Cytat(erix @ 23.05.2009, 16:37:05 )

Kod

otw = $('.otwBadania');

Jeśli masz tylko jeden atrybut do modyfikacji, nie trzeba używać JSON jako argumentu. [;

Wiem, że nie trzeba - ale wcześniej było tam jeszcze coś jeszcze - zobaczyłem ze w oryginale kamil4u dodaje dwie rzeczy do nowego diva, to od razu klamry otworzyłem. Dopiero potem zauważyłem, ze drugą z nich jest innerHTML - stąd masz jeszcze na końcu html(). Klamry zostały z pośpiechu

Ale z zgadzam się, że w przypadku jednego argumentu prościej byłoby:

Kod

$("<div/>").attr('id', 'idDiva');

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.