[jQuery] wyświetlanie divów Opcje

[zonkerman]

Witam

Mam takie coś:

[HTML] pobierz, plaintext 
<li id="wiz">
<div id="glowne">Tutaj główne opcje</div>
<div id="wiecej">Tutaj dodatkowe info</div>
<div id="opcje"><a id="pokazwiecej" href="#">Więcej</a></div>
</li>
[HTML] pobierz, plaintext 

I tutaj mam fragment jQuery:

Kod

$("ol#wizytowka div#wiecej").hide();

$("a#pokazwiecej").click(function(){
        $(this).prev("div#wiecej").slideToggle(500)
        return false;
           });

I nie działa mi to. Czego oczekuję:
Na początku po wczytaniu wszystkie divy#wiecej są niewidoczne (to działa). Teraz chcę, aby po kliknięciu na więcej chcę aby div#wiecej pokazywał się lub chował, ale do poszczególnego <li>. I nie wiem jak to zrobić (IMG:style_emoticons/default/sad.gif)

Ten post edytował zonkerman 19.07.2010, 17:03:50

[kreciko]

Musisz wiedzieć, że na stronie nie może być kilku znaczników z tym samym id. Więc chyba zamiast id="więcej" powinieneś użyć class="więcej". To się tyczy znacznika li i div w Twoim przypadku. A jak to rozwiązać? musisz pokombinować.

Ten post edytował kreciko 19.07.2010, 18:51:22

[zonkerman]

Czemu nie może być? Wtedy tylko rozdzielasz wpisując w uchwytach np a#wiecej ; p#wiecej itd. Zależy co chcesz wziąć. Kombinuje cały czas. Bo jeśli nie mam tego diva#opcje , to wtedy działa. Więc jakoś jego muszę przeskoczyć.

[kreciko]

Tu masz dlaczego: http://www.w3.org/TR/xhtml1/#h-4.10
Tak jest w specyfikacji. I jeżeli się odwołujesz do elementu o id=wiecej, to silnik javascripta nie wie, czasami się odwoła do jednego, czasami do drugiego, czasami do obu, a czasami nie zadziała, zależy jaka przeglądarka(jaki silnik). Ja bym to zrobił tak: "$("li#wiz").next("div#wiecej").toggle()"

[zonkerman]

Akurat u mnie nie ma kliku id. Chyba, że chodzi Ci o to, że np mam kilka wyświetlonych li. Ale może być kilka choćby dlatego (punkt 7):
http://www.webdesignerwall.com/tutorials/j...-for-designers/
Jak będzie trzeba to pominę tego <div id="opcje"> ale jednak wolałbym, aby on był. A Twój sposób jakoś nie bardzo chce działać.

Ten post edytował zonkerman 19.07.2010, 22:38:55

[kreciko]

Piszesz to w php, czy w html? Mógłbyś podać kontekst w którym to masz? Spróbuj swoją stronę zwalidować.

[zonkerman]

W php. Tutaj jest fragment kodu (pętla w php):

[HTML] pobierz, plaintext 
<ol id="wizyt">
<?php
(zapytanie MySQL i trochę php)
while($wynik = mysql_fetch_assoc($zapyt))
    { ?>
 
<li id="wiz">  
<div id="glowne">Tutaj główne opcje</div>
<div id="wiecej">A tutaj dodatkowe</div>
<a id="pokazwiecej" href="#">Więcej</a>
</li>
 
    <?php } i trochę skryptu php ?>
</ol>
[HTML] pobierz, plaintext 

A tutaj jQuery:

Kod

$(document).ready(
    function()
    {
        $("ol#wizyt div#wiecej").hide();
        
        $("a#pokazwiecej").click(function(){
        $(this).prev("div#wiecej").slideToggle(500);        
        return false;
           });
    });

Teraz akurat nie mam możliwości zrobić walidacji, bo nie mam stronki na serwerze, tylko piszę ją lokalnie. ale może tego nie trzeba robić.

[kreciko]

Ja bym sobie to zprametryzował ten kod html.


Jak masz zapytanie do mysql, to pewnie zwraca Ci jakąś unikatową wartość, np. id, albo hash

[PHP] pobierz, plaintext 
<ol id="wizyt">
<?php
(zapytanie MySQL i trochę php)
while($wynik = mysql_fetch_assoc($zapyt))
    { ?>
 
<li id="<?php echo $wynik['id']; ?>">  
<div id="glowne">Tutaj główne opcje</div>
<div id="<?php echo "d".$wynik['id'];?>">A tutaj dodatkowe</div>
<a class="pokazwiecej" id="<?php echo "a"$wynik['id']?>" href="#">Więcej</a>
</li>
 
    <?php } i trochę skryptu php ?>
</ol>
 
[PHP] pobierz, plaintext 

a w jQuery tak:

[HTML] pobierz, plaintext 
 $("a.pokazwiecej").click(function(){
       var id =  $(this).attr("id").
       $("div#d".id).toggle();
           });
[HTML] pobierz, plaintext 

Ten post edytował kreciko 20.07.2010, 10:12:46

[zonkerman]

Akurat tego nie chcę parametryzować (IMG:style_emoticons/default/smile.gif) To ma być stałe, dopiero dane w div'ach będą wyświetlały dane z bazy. Więc chcę, aby to wyglądało tak:

[HTML] pobierz, plaintext 
<ol id="wizyt">
<?php
(zapytanie MySQL i trochę php)
while($wynik = mysql_fetch_assoc($zapyt))
{ ?>
 
<li id="wiz">
<div id="glowne">Tutaj główne dane pobrane z bazy</div>
<div id="wiecej">Tutaj dodatkowe dane pobrane z bazy</div>
<div id="opcje"><a id="pokazwiecej" href="#">Więcej</a></div>
 </li>
 
<?php } i trochę skryptu php ?>
</ol>
[HTML] pobierz, plaintext 

Dlatego chcę, aby był ten div#opcje ,to w stylach chcę go sobie odpowiednio poformatować. Próbowałem nawet coś kombinować w prevUntil, ale też mi to nie chciało działać.

[kreciko]

Sprawdziłbym jeszcze konsole błędów. Albo zrobiłbym, tak:

Zamiast tego:

[HTML] pobierz, plaintext 
$(this).prev("div#wiecej").slideToggle(500);
[HTML] pobierz, plaintext 

Dałbym to:

[HTML] pobierz, plaintext 
$(this).prev().prev().slideToggle(500);
[HTML] pobierz, plaintext 

ewentualnie napisać, tak jak jest tutaj:
http://api.jquery.com/prev/ - pierwszy przykład, obczaj kod.

[zonkerman]

Jeśli mam:

[HTML] pobierz, plaintext 
<li id="wiz">  
<div id="glowne">Tutaj główne opcje</div>
<div id="wiecej">Tutaj dodatkowe opcje</div>
<a id="pokazwiecej" href="#">Więcej</a>
</li>
[HTML] pobierz, plaintext 

I w skrypcie napiszę:

[HTML] pobierz, plaintext 
$(this).prev().prev().slideToggle(500);
[HTML] pobierz, plaintext 

To chowa mi div#glowne.

A jeśli mam:

[HTML] pobierz, plaintext 
<li id="wiz">  
<div id="glowne">Tutaj główne opcje</div>
<div id="wiecej">Tutaj dodatkowe opcje</div>
<div id="opcje"><a id="pokazwiecej" href="#">Więcej</a></div>
</li>
[HTML] pobierz, plaintext 

To nic się nie dzieje. Konsola błędów nic nie pokazuje. Nawet jak robię różne kombinacje do tego prev() tzn wpisuje tam różne div'y to i tak nie działa :/ Przykład działa, nawet na 2 .prev() , ale do swojego nie mogę użyć :/

Sposób z id też nie działa.

Ten post edytował zonkerman 20.07.2010, 16:57:23

[#luq]

Nie rozumiem dlaczego nie słuchasz ludzi którzy starają Ci pomóc. Musisz mieć unikalne id, taka jest idea całego atrybutu id, bo jeśli by tak nie było to czym by się różniło od atrybutu class? Zresztą atrybut id jako pole z bazy to jest marny pomysł.

Ja bym nie krył za pomocą JS`a bo jeśli nie zostanie wczytane całe drzewko DOM to ten tekst będzie widoczny co sprawi przy wolniejszych łączach efekt takiego niefajnego mrugnięcia/zniknięcia...

Nie używaj taga <a/> jeśli nie jest to link. To kłóci się z tym co ma reprezentować ten znacznik.

[HTML] pobierz, plaintext 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Disable</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<script type="text/javascript" src="./js/jquery.js"></script>
 
	<script type="text/javascript">
		$(document).ready(function(){
			$( '#wizyt li div.opcje' ).click(function(){
				$(this).prev().toggle();
			});
		});
	</script>
 
	<style type="text/css">
		#wizyt li div.wiecej { display: none; }
		#wizyt li div.opcje { cursor: pointer; }
	</style>
 
  </head>
<body>
 
	<ol id="wizyt">
		<li>
			<div class="glowne">Tutaj główne dane pobrane z bazy</div>
			<div class="wiecej">Tutaj dodatkowe dane pobrane z bazy</div>
			<div class="opcje">Więcej</div>
		</li>
		<li>
			<div class="glowne">Tutaj główne dane pobrane z bazy</div>
			<div class="wiecej">Tutaj dodatkowe dane pobrane z bazy</div>
			<div class="opcje">Więcej</div>
		</li>
	</ol>
 
</body>
</html>
[HTML] pobierz, plaintext 

[zonkerman]

Dzięki (IMG:style_emoticons/default/smile.gif) To działa. Musze tylko przerobić parę rzeczy pod siebie. Wielki dzięki.

==EDIT==
Tylko 1 problem. Jak mam w tym div#opcje linki <a> to wtedy każdy mi otwiera tego diva#wiecej . Wiec jak zrobić, aby tylko na przycisk Więcej reagował?

Ten post edytował zonkerman 20.07.2010, 22:28:18