Forum PHP.pl > [HTML][JavaScript]Dodawanie numerów dla tagu

Misiur66

22.05.2008, 17:10:28

Witam! Mam pewien problem - otóż bawię się z formularzami pod AJAX-a, ale problemy już mnie dopadły w Javascripcie. Tutaj przedstawie kod i go objaśnię:

Kod

//Komentarz
    var newsy = getElementsByClassName('news');
    var liczba = 0;
    for(var i=0; i<newsy.length; i++){
        liczba++;
        var kontener_id = 'komentarz_kontener_'+liczba;
        var rozwijacz_id = 'komentarz_rozwijacz_'+liczba;
        var hr_id = 'komentarz_hr_'+liczba;
        var kontener = $(kontener_id);
        var rozwijacz = $(rozwijacz_id);
        var hr = $(hr_id);
        var widok = kontener.style.display;
        rozwijacz.onclick = function(){
            if(widok == 'none'){
                kontener.style.display = 'block';
                hr.style.display = 'block';
            }
            else if(widok == 'block'){
                kontener.style.display = 'none';
                hr.style.display = 'none';
            }
        }
    }

i HTML

Kod

<hr class='komentarz_belka_ogrodzenie' />
                                    <div class='komentarz_belka'><span class='komentarz_przedluzacz'><b>KOMENTARZE</b></span><span class='komentarz_rozwijacz_span'><b class='komentarz_rozwijacz' id='komentarz_rozwijacz_2'>+</b></span></div>
                                    <hr class='komentarz_belka_ogrodzenie' />
                                    <div class='komentarz_kontener' id='komentarz_kontener_2' style='display: none;'>
                                        <br />
                                        <form class='formularz_komentarz' action='php/komentarze.php' method='$_GET'>
                                            <div class='rownaj_label'>
                                                <label for='komentarz_nick'><b class='komentarz_label_tekst'>Nick:</b></label><br />
                                                <label for='komentarz_tresc'><b class='komentarz_label_tekst'>Treść:</b></label>
                                            </div>
                                            <div class='rownaj_input'>
                                                <input type='text' name='komentarz_nick' /><br />
                                                <textarea name='komentarz_tresc'></textarea>
                                            </div>
                                        </form>
                                    </div>
                                    <hr class='komentarz_hr' id='komentarz_hr_2' style='display: none;' />

Tutaj był przykładowy kod HTML akurat z id 2. Otóż próbuję dostosować ilość numerków zgodnie z ilością divów o class news (tutaj nie pokazałem go), za pomocą getElementsByClassName (kod jest wcześniej). Po wstawieniu alerta zwraca kolejność 1,2,3,4 i to się zgadza. Ale po kliknięciu w 'komentarz_rozwijacz_x' rozwija się tylko 1 element i nie da się go zwinąć. Proszę o pomoc!

ActivePlayer

22.05.2008, 17:45:05

Kod

var kontener_id = '#komentarz_kontener_'+liczba;
var rozwijacz_id = '#komentarz_rozwijacz_'+liczba;
var hr_id = '#komentarz_hr_'+liczba;

pamietaj ze pobierasz by id czyli # w jquery. co do reszty, lepiej uzyc jquerowego .css() niz id.style.costam = 'costam';

Misiur66

22.05.2008, 17:55:19

Sorka ale to nie JQuery

$(id) to moja funkcja...

ActivePlayer

22.05.2008, 18:15:32

zobacz czy ona zwraca Ci konkretne obiekty. i jeszcze, nie pisz elseif, tylko samo else, bo są 2 wyjscia, widoczne, albo niewidoczne.

Misiur66

22.05.2008, 18:27:40

Funkcja działa na 100%, bo używam jej w całym kodzie. Else nie dało nic

I przy wciśnięciu dowolnego 'rozwijacza' rozwija się ten o najwyższym id, ale się nie zwija. A i nazwy zmiennych są trochę mylące. W tych coś_id to tylko tekst do prawdziwego getElementById.

ActivePlayer

22.05.2008, 18:33:50

1. zamien elseif na samo else
2.

Kod

rozwijacz.onclick

zamien na

Kod

$('komentarz_rozwijacz_'+liczba)

3. zainteresuj sie np jquery bo sie zajedziesz.

Misiur66

22.05.2008, 18:36:58

1 i 2 zrobione, ale niestety...

3. Może pomyśle

Ale jak narazie pozostanę przy 'czystym' JS (chociaż jeśli da się w jQuery robić płynne rozwijanie to się zainteresuję

).

ActivePlayer

22.05.2008, 18:38:43

da sie. robisz np.
$("#id_elementu").show('slow'); i jest ladnie. mase opcji daje jQuery.

pokaz jak wyglada fkcja $()

Misiur66

22.05.2008, 18:41:27

Kod

function $(id) {
return document.getElementById(id);
}

Testowane już w tym samym kodzie.

ActivePlayer

22.05.2008, 18:42:06

Kod

//Komentarz
    var newsy = getElementsByClassName('news');
    var liczba = 0;
    for(var i=0; i<newsy.length; i++){
        liczba++;

        $('komentarz_rozwijacz_'+liczba).onclick = function(){
            if($('komentarz_kontener_'+liczba).style.display == 'none'){
                $('komentarz_kontener_'+liczba).style.display = 'block';
                $('komentarz_hr_'+liczba).style.display = 'block';
            }
            else{
                $('komentarz_kontener_'+liczba).style.display = 'none';
                $('komentarz_hr_'+liczba).style.display = 'none';
            }
        }
    }

Misiur66

22.05.2008, 18:44:18

Mamy postęp - da się zwinąć, ale dalej każdy rozwijacz rozwija tylko największe id.

ActivePlayer

22.05.2008, 18:49:55

Kod

i w htmlu, oczywiscie cyferki sobie dynamicznie wygeneruj

Kod

Misiur66

22.05.2008, 18:51:58

Spróbuję, chociaż BARDZO nie lubię wstawiania JS w HTML.

No cóż wyrzuca błąd 'zwin_rozwin is not defined'

ActivePlayer

22.05.2008, 18:56:37

hard refresz w przegladarce, sprawdz literówki itp itd. musisz gdzies miec blad po drodze.

Misiur66

23.05.2008, 12:17:14

Skrypt ~Lorda T jest świetny (już dostał pomógł, ~ActivePlayer również). Ale jeszcze jedna rzecz pozostała - rozwijają się ok, ale już gorzej ze zwijaniem... Popróbuję, ale to taka moja ostatnia prośba

Sorka brak kodu:

Kod

//Komentarz
function pokaz_komentarz(id){
     var view = $('komentarz_kontener_'+id).style.display;
     var rozwijacz = $('komentarz_rozwijacz_'+id);
     rozwijacz.onclick = function(){
         if (view != 'block') {
             $('komentarz_kontener_' + id).style.display = 'block';
             $('komentarz_hr_' + id).style.display = 'block';
         }
         else if (view != 'none'){
             $('komentarz_kontener_' + id).style.display = 'none';
             $('komentarz_hr_' + id).style.display = 'none';
         }
     }
}

Kod

var newsy = getElementsByClassName('news');
     var komentarz_rozwijacz = new Array(newsy.length);
     for(var i = 0; i<newsy.length; i++){
         id=i+1;
         komentarz_rozwijacz[id] = pokaz_komentarz('' + id + '');
     }

Edit:
Hihi zadziałało po dodaniu w pokaz_komentarz:

Kod

//Komentarz
function pokaz_komentarz(id){
     var view = $('komentarz_kontener_'+id).style.display;
     var rozwijacz = $('komentarz_rozwijacz_'+id);
     rozwijacz.onclick = function(){
         if (view != 'block') {
             $('komentarz_kontener_' + id).style.display = 'block';
             $('komentarz_hr_' + id).style.display = 'block';
                return pokaz_komentarz(id);
         }
         else if (view != 'none'){
             $('komentarz_kontener_' + id).style.display = 'none';
             $('komentarz_hr_' + id).style.display = 'none';
                return pokaz_komentarz(id);
         }
     }
}