GoldenLine
Zaloguj się
Daniel Wojciechowski

Daniel Wojciechowski Skład DTP, Grafik,
Nowe 7 Dni Gryfina

Temat: Dynamiczny id i jego event na określony div

Witam. Ciężko było sprecyzować temat, ale problem jest następujący. Mam dynamicznie tworzoną listę div-ów w których trzymam treści. Każdy z tych div-ów ma dynamiczne id i wygląda to tak:

<div id='com-1'></div>

<div id='com-5'></div>

<div id='com-9'></div>


cyfra po 'com-' jest dynamicznie przypisywana przez PHP w pętli i jest to indywidualny id danego diva ściągnięty z bazy danych. Wewnątrz tego diva chcę generować link po którego kliknięciu będzie się miał wykonać jakiś event i naturalnie jego budowa wygląda tak:

<a href'#' id='but-X'>


i dla X jest odpowiadający mu id który otrzymał div. I samo polecenie jquery próbowałem napisać w ten sposób:



$( 'div[id^="com-"] a[id^="but-"]' ).click(function(){

		$(this).fadeOut("slow");

	});


Przykłądowo po kliknięciu linku o id 'but-7' div o id 'com-7' powinien się powoli schować, ale składnia niestety jest nieprawidłowa. Czy mógłby mnie ktoś nakierować gdzie leży błąd?Daniel Wojciechowski edytował(a) ten post dnia 24.06.11 o godzinie 23:50
Link do wypowiedziLink

konto usunięte

Temat: Dynamiczny id i jego event na określony div

sugeruje poprostu dodac do kazdego z tego diva dodatkowa klase, ktora uzyjesz do wyszukiwania... zrobienie tego po ID, ktore jest dosc losowe nie ma ZADNEGO sensu.

<a href'#' id='but-X' class="dynamicDiv">

a JS uzyj w stylu:
$('.dynamicDiv').children('a').bind('mousedown', function() {
$(this).parent().fadeOut('slow');
});

albo mozesz uzyc click(), zasada ta sama.

nikt nie powiedzial ze musisz uzywac ID ;)
Generalnie JS i CSS dziala szybciej jesli uzywa ID, ale roznica jest tak mikroskopijna, ze w twoim przypadku nie gra roli

ps. wlasnie zrobilem edita i poprawilem lekko, bo dopiero teraz zobaczylem ze chcesz klikac na linku w srodku diva ale oczekujesz ze ten click zamknie calego DIVa ;)

ps.2 ID na stronie moze byc TYLKO JEDNE!. JEsli twoj DIV ma id="costam-1", to link w srodku nie powienniem miec takiego samego. W twoim przypadku nie wyglada by ID bylo Ci potrzebne do czegokolwiek w DIVie i linku.Andrzej Winnicki edytował(a) ten post dnia 25.06.11 o godzinie 00:12
Link do wypowiedziLink
Daniel Wojciechowski

Daniel Wojciechowski Skład DTP, Grafik,
Nowe 7 Dni Gryfina

Temat: Dynamiczny id i jego event na określony div

Zrobiłem tak jak napisałeś, i teraz po kliknięciu na link, chowa mi się link ... a ja chciałem by chował się cały div wraz z tym linkiem, bo tam pojawi się coś innego. Nadałem też temu całemmu div-owi klasę DynamicDiv i tak samo... nie znam się aż tak dobrze na łączeniu składni w jquery dlatego mój problem jest tu na forum...Daniel Wojciechowski edytował(a) ten post dnia 25.06.11 o godzinie 00:19
Link do wypowiedziLink
Tomasz M.

Tomasz M. never go full
retard!

Temat: Dynamiczny id i jego event na określony div

A nie możesz se dodać do diva jakiegoś dodatkowego atrybutu? Np. ref-id i po tym referować? Niech se nawet PHP dopisze :p

http://api.jquery.com/attr/
Link do wypowiedziLink
Daniel Wojciechowski

Daniel Wojciechowski Skład DTP, Grafik,
Nowe 7 Dni Gryfina

Temat: Dynamiczny id i jego event na określony div

Wybaczcie, ale przeoczyłem i do id dodałem klasę DynamicDiv zamiast wpisać to w class. Teraz ładnie działa przykład od Andrzeja i mój problem został rozwiązany. Dzięki Wam serdecznie za pomoc o tak niewdzięcznej porze w piątek ;)

I jeszcze żeby wątek stał się w pełni wartościowy to poniżej działający kod:

JS


$('.dynamicDiv').bind('mousedown', function() {

  $(this).fadeOut('slow');

});


HTML


<div id='com-5' class='dynamicDiv'><a href='#' class='dynamicDiv'>Klik</a></div>
Daniel Wojciechowski edytował(a) ten post dnia 25.06.11 o godzinie 00:35
Link do wypowiedziLink

konto usunięte

Temat: Dynamiczny id i jego event na określony div

bez dodatkowych klas, bez dodatkowych atrybutów: http://jsfiddle.net/faNkF/1/Piotr Lewandowski edytował(a) ten post dnia 25.06.11 o godzinie 00:46
Link do wypowiedziLink
Daniel Wojciechowski

Daniel Wojciechowski Skład DTP, Grafik,
Nowe 7 Dni Gryfina

Temat: Dynamiczny id i jego event na określony div

A już myślałem, że problem mam z głowy. Po kliknięciu w diva również chowa mi się div a tak ma nie być...ma się chować tylko gdy kliknę w link. Z kolei przykłąd od Piotra też chowa tylko link a nie żaden z różowych boxów.... jest jeszcze taki szczegół, gdyż po kliknięciu ma się schować div który jest wewnątrz tego głównego diva i ma się "fadeIn" ukryty wcześniej div i ma ukazać inną treść. Krótko mówiąc: główny div jest blokiem z komentarzem, kliknięcie na link spowoduje schowanie się komentarza i ma wyskoczyć potwierdzenie usunięcia
Link do wypowiedziLink

konto usunięte

Temat: Dynamiczny id i jego event na określony div

Daniel Wojciechowski:
A już myślałem, że problem mam z głowy. Po kliknięciu w diva również chowa mi się div a tak ma nie być...ma się chować tylko gdy kliknę w link. Z kolei przykłąd od Piotra też chowa tylko link a nie żaden z różowych boxów.... jest jeszcze taki

Przykład Piotra CHOWA różowy boks, NIE link...
szczegół, gdyż po kliknięciu ma się schować div który jest wewnątrz tego głównego diva i ma się "fadeIn" ukryty wcześniej div i ma ukazać inną treść. Krótko mówiąc: główny div jest blokiem z komentarzem, kliknięcie na link spowoduje schowanie się komentarza i ma wyskoczyć potwierdzenie usunięcia

Proponuję jednak zacząć od tego: http://docs.jquery.com/Main_Page
Link do wypowiedziLink

konto usunięte

Temat: Dynamiczny id i jego event na określony div

Daniel Wojciechowski:
A już myślałem, że problem mam z głowy. Po kliknięciu w diva również chowa mi się div a tak ma nie być...ma się chować tylko gdy kliknę w link. Z kolei przykłąd od Piotra też chowa tylko link a nie żaden z różowych boxów.... jest jeszcze taki szczegół, gdyż po kliknięciu ma się schować div który jest wewnątrz tego głównego diva i ma się "fadeIn" ukryty wcześniej div i ma ukazać inną treść. Krótko mówiąc: główny div jest blokiem z komentarzem, kliknięcie na link spowoduje schowanie się komentarza i ma wyskoczyć potwierdzenie usunięcia

zerknij na moj kod na gorze... zrobilem EDITa a ty uzyles kod ktory byl chwilke przed ;)

JS:


$('.dynamicDiv').children('a').bind('mousedown', function() {

$(this).parent().fadeOut('slow');

});


1. znajdzie objekty ktore maja nadana klase "dynamicDiv"
2. zobaczy czy w srodku jest link, jesli tak, to doda event mousedown tylko do A
3. jesli kliniesz na linku, sprawdzi ktory zostal klikniety, pojdzie jeden poziom wyzej i zamknie calego diva w ktorym ten link byl

HTML:


<div id='com-5' class='dynamicDiv'><a href='#'>Klik</a></div>


Aczkolwiek ty oczekujesz czegos innego, wiec zrob:
JS:


$('.dynamicDiv').children('a').bind('mousedown', function() {

$(this).fadeOut('slow'); // schowa tylko link

$(this).parent().children('.newDiv').fadeIn('slow'); // pokaze ukryty inny div

});


HTML:


<div id='com-5' class='dynamicDiv'>

<a href='#'>Klik</a>

<div class="newDiv" style="display:none">Moj nowy div po kliknieciu w link</div>

</div>
Andrzej Winnicki edytował(a) ten post dnia 25.06.11 o godzinie 10:39
Link do wypowiedziLink
Daniel Wojciechowski

Daniel Wojciechowski Skład DTP, Grafik,
Nowe 7 Dni Gryfina

Temat: Dynamiczny id i jego event na określony div

@Piotr: Na początku wkleiłeś chyba inny kod do pierwszej wersji swojego skryptu w jsfiddle czyli: http://jsfiddle.net/faNkF/ . Możliwe że zrobiłeś update a ja nie zwróciłem uwagi. Wersja: http://jsfiddle.net/faNkF/1 działa już prawidłowo. A uwagi co do powrotu do podstaw prosiłbym zostawić dla siebie.

@Andrzej: Fakt było kilka update-ów i wszystkie przetestowałem, ale gdy zacząłem je dostosowywać do tego co chcę osiągnąć to zaczęły mi one trochę komplikować sprawę. Ogólnie efekt końcowy uzyskałem w ten sposób:

JS:


$(document).ready(function() {

    

    $('a[id^="but-"]').click(function() {

        var id = extractLinkId($(this).attr('id'));

        $('#div-'+id).fadeOut();

    });

    

    function extractLinkId(linkId) {

        return parseInt(linkId.substr('but-'.length));

    }

        

    

});


html:


<div id='div-7'>AAA</div>

<div id='div-10'>BBB</div>

<div id='div-90'>CCC</div>

	<a href='#' id='but-7'>A</a>

<a href='#' id='but-10'>B</a>

<a href='#' id='but-90'>C</a>


Do podejrzenia: http://jsfiddle.net/L83yE/4/

Dzięki Wam za pomoc jeszcze raz, temat zamykam.Daniel Wojciechowski edytował(a) ten post dnia 26.06.11 o godzinie 22:20
Link do wypowiedziLink

konto usunięte

Temat: Dynamiczny id i jego event na określony div

Daniel Wojciechowski:
Troche namieszales i robisz rzeczy, ktorych tak naprawde nie powinnies ;)

$('a[id^="but-"]').click(function() {
var id = extractLinkId($(this).attr('id'));
$('#div-'+id).fadeOut();
});

moze byc po prosty

$('a[id^="but-"]').click(function() {
$(this).parent().fadeOut();
});

chbya ze ten button jest schowany jeszcze w innych divach/spanach czy cholera wie co... w razie czego, nie krepuj sie z dodawaniem .parent(). bedzie to dzialac szybciej niz pobieraniem attr potem ponowne wyszukiwanie itd (nie zebys kiedykolwiek ta roznice zobaczyl golym okiem) :)
Link do wypowiedziLink

konto usunięte

Temat: Dynamiczny id i jego event na określony div

Daniel Wojciechowski:
@Piotr: Na początku wkleiłeś chyba inc ny kod do pierwszej wersji swojego skryptu w jsfiddle czyli: http://jsfiddle.net/faNkF/ . Możliwe że zrobiłeś update a ja nie zwróciłem uwagi. Wersja: http://jsfiddle.net/faNkF/1 działa już prawidłowo. A uwagi co do powrotu do podstaw prosiłbym zostawić dla siebie.

@Andrzej: Fakt było kilka update-ów i wszystkie przetestowałem, ale gdy zacząłem je dostosowywać do tego co chcę osiągnąć to zaczęły mi one trochę komplikować sprawę. Ogólnie efekt końcowy uzyskałem w ten sposób:

JS:


$(document).ready(function() {

    

    $('a[id^="but-"]').click(function() {

        var id = extractLinkId($(this).attr('id'));

        $('#div-'+id).fadeOut();

    });

    

    function extractLinkId(linkId) {

        return parseInt(linkId.substr('but-'.length));

    }

        

    

});


html:


<div id='div-7'>AAA</div>

<div id='div-10'>BBB</div>

<div id='div-90'>CCC</div>

	<a href='#' id='but-7'>A</a>

<a href='#' id='but-10'>B</a>

<a href='#' id='but-90'>C</a>


Do podejrzenia: http://jsfiddle.net/L83yE/4/

Dzięki Wam za pomoc jeszcze raz, temat zamykam.

Popełniasz błąd dając do DWÓCH elementów ten sam ID - co jest niezgodne ze specyfikacją HTML/XHTML - lepiej już dać ID właściwego elementu w atrybucie HREF (tak jak w moim przykładzie), albo tak jak napisał Andrzej - użyć '.parent()' (chyba, że struktura jest bardziej zagmatwana...
Link do wypowiedziLink

konto usunięte

Temat: Dynamiczny id i jego event na określony div

Andrzej Winnicki:
Generalnie JS i CSS dziala szybciej jesli uzywa ID, ale roznica jest tak mikroskopijna, ze w twoim przypadku nie gra roli

Generalnie racja, jednak mylisz się, że różnica jest mikroskopijna:) Selektowanie diva jest o wiele szybsze niż klasy. Napisałem banalny teścik by nie być gołosłownym (pozostawia wiele do życzenia, jednak pokazuje generalnie 'o co cho'). W przypadku jQuery narzut jest czterokrotny.

http://jsperf.com/id-vs-class

Przetestowałem w Chrome 12, Chrome 14 Canary, IE9 i Fx5 jak widać w tabelce.

Pozdr
Link do wypowiedziLink
Tobiasz Glazar

Tobiasz Glazar Front-End Developer

Temat: Dynamiczny id i jego event na określony div

@Łukasz: 'Selektować diva' możesz tak:
document.getElementsByTagName('div');

A test pokazujący porównanie szybkości wyszukiwania "ID vs class" powinien wyglądać raczej tak:
http://jsperf.com/selector-test-glTobiasz Glazar edytował(a) ten post dnia 27.06.11 o godzinie 10:45
Link do wypowiedziLink

konto usunięte

Temat: Dynamiczny id i jego event na określony div

Tobiasz Glazar:
@Łukasz: 'Selektować diva' możesz tak:
document.getElementsByTagName('div');

A test pokazujący porównanie szybkości wyszukiwania "ID vs class" powinien wyglądać raczej tak:
http://jsperf.com/selector-test-gl

erm... rili?

wrzucilem do testu jedynie selektory, bo o nich akurat byla mowa...

nie wiem czemu wg Ciebie test 'powinien' tak wygladac... nie mozna bylo po prostu do niego dodac tych dwoch test cases by miec szerszy zakres testow? wyjasnij prosze czemu nie moze znalezc sie tam przypadek z querySelector?:)Łukasz Nowacki edytował(a) ten post dnia 27.06.11 o godzinie 12:25
Link do wypowiedziLink

konto usunięte

Temat: Dynamiczny id i jego event na określony div

Tobiasz Glazar:
@Łukasz: 'Selektować diva' możesz tak:

ok, to bylo male typo, chodzilo mi oczywiscie o 'id' nie 'diva'... 2a.m. robi swoje... tak czy inaczej, ciagle ciekawi mnie czemu querySelector jest az taki evil:)
Link do wypowiedziLink
Tobiasz Glazar

Tobiasz Glazar Front-End Developer

Temat: Dynamiczny id i jego event na określony div

Bo jeżeli wiesz, że szukasz elementu od konkretnym ID/klasie to 'getElementById'/'getElementsByClassName' bedzie o rząd wielkości szybszy niż 'querySelector'. Tylko dlatego.
Link do wypowiedziLink

konto usunięte

Temat: Dynamiczny id i jego event na określony div

Tobiasz Glazar:
Bo jeżeli wiesz, że szukasz elementu od konkretnym ID/klasie to 'getElementById'/'getElementsByClassName' bedzie o rząd wielkości szybszy niż 'querySelector'. Tylko dlatego.

To raczej logiczne...

Ten test mial na celu jedynie porownanie roznych metod wybierania elementu przy pomocy selectorow css... Tyle halasu o nic.

Gdyby sie czepiac, to przyklad jquery rowniez nie ma sensu, bo find() jest o wiele szybsze... Nie o to jednak chodzilo.

Peace.Łukasz Nowacki edytował(a) ten post dnia 27.06.11 o godzinie 15:12
Link do wypowiedziLink
Tobiasz Glazar

Tobiasz Glazar Front-End Developer

Temat: Dynamiczny id i jego event na określony div

Przecież nie krzyczę :)

Peace.
Link do wypowiedziLink

konto usunięte

Temat: Dynamiczny id i jego event na określony div

W ym przypadku roznica pewnie jest nieistotna... Ale jesli ktos faktycznie pisze cos wiekszego i zaczyna scinac czas na ile sie da, to takze zwraca uwage na uzywanie ID zatmiast class i ulatwianie sobie zycia, cachowanie drzewek i rozne takie inne ;) Grunt to nie kazac kodowi robic wiecej, niz potrzeba ;)
Peace <- tak na wszelki wypadek :P
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy


Następna dyskusja:

Przewijanie div'a




Wyślij zaproszenie do
Anuluj