Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [JavaScript]dynamiczne pozycjonowanie elementu
Mrowek
post
Post #1





Grupa: Zarejestrowani
Postów: 51
Pomógł: 1
Dołączył: 22.08.2008

Ostrzeżenie: (0%)
-----

Mam taki przykladowy kod:
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. </head>
  4. <body>
  5. <div class="badania"><div class="otwBadania">Badania</div></div>
  6.     <div class="poszczBadania" id="pb2">
  7.         <div class="zamk"></div>
  8.         <div class="bad" id="b8">czas protrombinowy (PT+INR)</div>
  9.         <div class="bad" id="b9">czas rekalcynacji</div>
  10.         <div class="bad" id="b10">fibrynogen</div>
  11.         <div class="bad" id="b11">czas koalinowo-kefalinowy (APTT)</div>
  12.     </div>
  13.     <div class="poszczBadania" id="pb3">
  14.         <div class="zamk"></div>
  15.         <div class="bad" id="b12">badanie ogólne z osadem</div>
  16.         <div class="bad" id="b13">badanie ogólne bez osadu</div>
  17.         <div class="bad" id="b14">Białko z dobowej zbiórki moczu (z DZM)</div>
  18.     </div>
  19.     </body>
  20. </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;]
Go to the top of the page
+Quote Post
singles
post
Post #2





Grupa: Zarejestrowani
Postów: 121
Pomógł: 26
Dołączył: 2.07.2007

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
kamil4u
post
Post #3





Grupa: Zarejestrowani
Postów: 2 350
Pomógł: 512
Dołączył: 4.01.2009
Skąd: Wrocław / Świdnica

Ostrzeżenie: (0%)
-----

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');
na
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.

Ten post edytował kamil4u 23.05.2009, 15:19:36
Go to the top of the page
+Quote Post
erix
post
Post #4





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów
I jest bezwartościowy, jeśli chodzi o IE. (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif)

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. [;
Go to the top of the page
+Quote Post
kamil4u
post
Post #5





Grupa: Zarejestrowani
Postów: 2 350
Pomógł: 512
Dołączył: 4.01.2009
Skąd: Wrocław / Świdnica

Ostrzeżenie: (0%)
-----

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ż!
Go to the top of the page
+Quote Post
erix
post
Post #6





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów
Owszem, ale wymaga to "sporej" ilości kodu. A ma przecież jQuery załadowane, to po co robić coś dwa razy?
Go to the top of the page
+Quote Post
kamil4u
post
Post #7





Grupa: Zarejestrowani
Postów: 2 350
Pomógł: 512
Dołączył: 4.01.2009
Skąd: Wrocław / Świdnica

Ostrzeżenie: (0%)
-----

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 (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) - dobra tu nie ma to znaczenia, ale zdarzało mi się robić skrypty, gdzie walczyłem o każdą sekundę (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
singles
post
Post #8





Grupa: Zarejestrowani
Postów: 121
Pomógł: 26
Dołączył: 2.07.2007

Ostrzeżenie: (0%)
-----

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 (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)

Ale z zgadzam się, że w przypadku jednego argumentu prościej byłoby:
Kod
$("<div/>").attr('id', 'idDiva');


Ten post edytował singles 24.05.2009, 16:48:30
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 23.08.2025 - 11:19
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn