Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][JavaScript] Dodanie/usunięcie atrybutu
Forum PHP.pl > Forum > Przedszkole
rucin96
12.05.2015, 10:10:35
Witam!
Niestety w JS u mnie bardzo bardzo słabo. Chciałbym aby po pojawieniu się pewnego tabu (pokazywanie i ukrywanie już mam) aktywowało się jedno z <selcet>. Są 4 o tym samym name, a po pokazaniu jednego z tabów chciałbym, aby tylko jeden został wysłany.

Jeżeli jeden tab jest aktywny to select z innego tabu powinien mieć disabled, a aktywny required itp.

DEMKO: http://jsfiddle.net/cz2boadb/

Mój kod HTML
[HTML] pobierz, plaintext 
  1.  
  2. 					<select id="EUR" name="code" class="dark space tab tab-1" />
  3. 						<option>EUR</option>
  4. 					</select>
  5.  
  6. 					<select id="GBP" name="code" class="dark space tab tab-2" />
  7. 						<option>GBP</option>
  8. 					</select>
  9.  
  10. 					<select id="CHF" name="code" class="dark space tab tab-3" />
  11. 						<option>CHF</option>
  12. 					</select>
  13.  
  14. 					<select id="USD" name="code" class="dark space tab tab-4" />
  15. 						<option>USD</option>
  16. 					</select>
[HTML] pobierz, plaintext


Kod JS

[HTML] pobierz, plaintext 
  1. 		$(document).ready(function() {
  2.         //dla każdego miejsca z tabami
  3.         $('.tabs').each(function() {
  4.             var $ul = $(this);
  5.             var $li = $ul.children('li');
  6.             //przy wejsciu na strone ukrywamy tresc tabow i pokazujemy tylko aktywny...
  7.             $li.each(function() { //pętla po wszystkich tabach
  8.                 var $trescTaba = $($(this).children('a').attr('href')); //pobieramy blok o id pobranym z linka-taba
  9.                 if ($(this).hasClass('active')) { //jeżeli ten tab ma klasę aktywną
  10.                     $trescTaba.show(); //to pobrany przed chwilą blok pokazujemy
  11.                 } else {
  12.                     $trescTaba.hide(); //jeżeli takiej klasy nie ma to blok ukrywamy
  13.                 }
  14.             });
  15.  
  16.             //mały trik - gdy klikamy na tab, wtedy wykonujemy zdarzenie dla linka, który się w nim znajduje (dzieki temu możemy kliknąć na cały tab, a nie tylko na linka)
  17.             $li.click(function() {$(this).children('a').click()});
  18.             //po kliknięciu na link...
  19.             $li.children('a').click(function() {
  20.                 //usuwamy z tabów klasę active
  21.                 $li.removeClass('active');
  22.                 //ukrywamy wszystkie taby               
  23.                 $li.each(function() {
  24.                     $($(this).children('a').attr('href')).hide();
  25.                 });
  26.                 //ustawiamy klikniętemu tabowi klasę aktywną
  27.                 $(this).parent().addClass('active');
  28.                 $($(this).attr('href')).show();
  29.                 //nie chcemy wykonać domyślnej akcji dla linka
  30.                 return false;
  31.             });
  32.         });
  33. });
[HTML] pobierz, plaintext


Będę bardzo wdzięczny za pomoc!
Tuminure
12.05.2015, 10:26:59
Jeżeli chcesz zachować istniejące rozwiązanie...
Prócz samej widoczności dodawaj/usuwaj atrybut "disabled" do selectów, które nie mają być wysyłane.

Jeżeli masz chęci/czas na zmianę...
Twoje obecne rozwiązanie nieprawidłowo wykorzystuje selecty. Dlaczego po prostu nie stworzysz jednego selecta w którym sam będziesz zmieniał opcje?
[HTML] pobierz, plaintext 
  1. <select name="code" class="dark space tab tab-1" required>
  2.     <option>EUR</option>
  3.     <option>GBP</option>
  4.     <option>CHF</option>
  5.     <option>USD</option>
  6. </select>
[HTML] pobierz, plaintext
rucin96
12.05.2015, 10:32:06
Właśnie zależy mi na zmianie automatycznej.

A jak mogę sprawić, aby atrybuty zmieniały się z required i disabled?

Tzn. aby był taki efekt.

Klik link 2.

<select disabled>
<select requirded>
<select disabled>
<select disabled>

Kliknk link 4


<select disabled>
<select disabled>
<select disabled>
<select required>
Korybut
12.05.2015, 12:02:06 
[HTML] pobierz, plaintext 
  1. var select = document.getElementById('.okreslonaKlasa');
  2.     select.getAttribute("required");
[HTML] pobierz, plaintext


spróbuj coś takiego wprowadzić do kodu. Oczywiście wewnątrz funkcji mouseover, gdy najedziesz na dany select.


spróbuj tak. Nie gwarantuje, że zadziała, nie mam w danej chwili jak tego sprawdzić a i sam się uczę js.

[HTML] pobierz, plaintext 
  1. $(".okreslonaKlasa").mouseover(function() {
  2. 			var select = document.getElementById('.okreslonaKlasa');
  3.                         select.getAttribute("required");
  4. 		});
[HTML] pobierz, plaintext
rucin96
12.05.2015, 12:05:47
Cytat(Korybut @ 12.05.2015, 13:02:06 ) *
[HTML] pobierz, plaintext 
  1. var select = document.getElementById('.okreslonaKlasa');
  2.     select.getAttribute("required");
[HTML] pobierz, plaintext


spróbuj coś takiego wprowadzić do kodu. Oczywiście wewnątrz funkcji onmouse, gdy najedziesz na dany select.



Niestety nie zbyt mi to pomogło sad.gif

Zrobiłem takie coś
[HTML] pobierz, plaintext 
  1. 		$(document).ready(function() {
  2.         //dla każdego miejsca z tabami
  3.         $('.tabs').each(function() {
  4.             var $ul = $(this);
  5.             var $li = $ul.children('li');
  6.             //przy wejsciu na strone ukrywamy tresc tabow i pokazujemy tylko aktywny...
  7.             $li.each(function() { //pętla po wszystkich tabach
  8.                 var $trescTaba = $($(this).children('a').attr('href')); //pobieramy blok o id pobranym z linka-taba
  9.                 if ($(this).hasClass('active')) { //jeżeli ten tab ma klasę aktywną
  10.                     $trescTaba.show(); //to pobrany przed chwilą blok pokazujemy 
  11. 					document.getElementById("EUR").required = true;
  12. 					document.getElementById("GBP").required = true;
  13. 					document.getElementById("CHF").required = true;
  14. 					document.getElementById("USD").required = true;
  15.                 } else {
  16.                     $trescTaba.hide(); //jeżeli takiej klasy nie ma to blok ukrywamy
  17. 					document.getElementById("EUR").disabled = true;
  18. 					document.getElementById("GBP").disabled = true;
  19. 					document.getElementById("CHF").disabled = true;
  20. 					document.getElementById("USD").disabled = true;
  21.                 }
  22.             });
  23.  
  24.             //mały trik - gdy klikamy na tab, wtedy wykonujemy zdarzenie dla linka, który się w nim znajduje (dzieki temu możemy kliknąć na cały tab, a nie tylko na linka)
  25.             $li.click(function() {$(this).children('a').click()});
  26.             //po kliknięciu na link...
  27.             $li.children('a').click(function() {
  28.                 //usuwamy z tabów klasę active
  29.                 $li.removeClass('active');
  30.                 $li.children('a').removeClass('active');
  31.                 //ukrywamy wszystkie taby               
  32.                 $li.each(function() {
  33.                     $($(this).children('a').attr('href')).hide();
  34.                 });
  35.                 //ustawiamy klikniętemu tabowi klasę aktywną
  36.                 //$(this).parent().addClass('active');
  37.                 $(this).addClass('active');
  38.                 $($(this).attr('href')).show();
  39.                 //nie chcemy wykonać domyślnej akcji dla linka
  40.                 return false;
  41.             });
  42.         });
  43. });
[HTML] pobierz, plaintext


Tylko problem. Wszystkie atrybuty idą do każdego select, a ja bym chciał się dowiedzieć jak zrobić aby działały naprzemiennie.
Korybut
12.05.2015, 12:12:03
Cytat(rucin96 @ 12.05.2015, 13:05:47 ) *
Tylko problem. Wszystkie atrybuty idą do każdego select, a ja bym chciał się dowiedzieć jak zrobić aby działały naprzemiennie.


bo z tego co zauważyłem w kodzie, to niezależnie na który element najedziesz to skrypt i tak będzie zmieniał atrybuty we wszystkich elementach na true.

A nie powinno być tak?

[HTML] pobierz, plaintext 
  1. if ($(this).hasClass('active')) { //jeżeli ten tab ma klasę aktywną
  2.                     $trescTaba.show(); //to pobrany przed chwilą blok pokazujemy 
  3. 					document.getElementById("EUR").required = true; //tylko wybrana opcja została aktywowana pod tym tabem
  4. 					document.getElementById("GBP").disabled = true;
  5. 					document.getElementById("CHF").disabled = true;
  6. 					document.getElementById("USD").disabled = true;
[HTML] pobierz, plaintext
rucin96
12.05.2015, 12:24:40
Cytat(Korybut @ 12.05.2015, 13:12:03 ) *
bo z tego co zauważyłem w kodzie, to niezależnie na który element najedziesz to skrypt i tak będzie zmieniał atrybuty we wszystkich elementach na true.


To jak zrobić, aby zmieniał tylko w elementach, które aktualnie są lub nie są ukryte?? :/

Required dla widocznego, disabled dla ukrytych.

Zmieniłem to
[HTML] pobierz, plaintext 
  1. var $trescTaba = $($(this).children('a').attr('href')); //pobieramy blok o id pobranym z linka-taba
  2.                 if ($(this).hasClass('active')) { //jeżeli ten tab ma klasę aktywną
  3.  
  4.                     $trescTaba.show(); //to pobrany przed chwilą blok pokazujemy 
  5.                 } else {
  6.  
  7.                     $trescTaba.hide(); //jeżeli takiej klasy nie ma to blok ukrywamy
  8.                 }
[HTML] pobierz, plaintext


Na to
[HTML] pobierz, plaintext 
  1. var $trescTaba = $($(this).children('a').attr('href')); //pobieramy blok o id pobranym z linka-taba
  2.                 if ($(this).hasClass('active')) { //jeżeli ten tab ma klasę aktywną
  3. 					$trescTaba.prop('required', true);
  4.                     $trescTaba.show(); //to pobrany przed chwilą blok pokazujemy 
  5.                 } else {
  6. 					$trescTaba.prop('disabled', true);
  7.                     $trescTaba.hide(); //jeżeli takiej klasy nie ma to blok ukrywamy
  8.                 }
[HTML] pobierz, plaintext


Zadziałało, ale.. Przy zmianie tabów dalej są wartości te co na początku czyli

Automatyczne klik 1 po wejściu na strone

required
disabled
disabled
disabled


Klik link 3

required
disabled
disabled
disabled

Zamiast

disabled
disabled
required
disabled
Korybut
12.05.2015, 12:27:24
Nawet lepiej jak dasz domyślnie .disabled dla elementów i tylko będziesz zmieniał jeden interesujący cię przy aktywowaniu na .required. Skrócisz kod. No i odwrotnie po opuszczaniu taba, przywracasz elementowi .disabled. Czyli musisz stworzyć kolejną funkcje która będzie znów zmieniać dla tego jednego elementu domyślną wartość.


[HTML] pobierz, plaintext 
  1. if ($(this).hasClass('active')) { //jeżeli ten tab ma klasę aktywną
  2.                     $trescTaba.show(); //to pobrany przed chwilą blok pokazujemy 
  3. 					document.getElementById("EUR").required = true;//tylko wybrana opcja została aktywowana pod tym tabem
  4.                 }
[HTML] pobierz, plaintext
rucin96
12.05.2015, 13:34:58
No właśnie powinno działać bo

[HTML] pobierz, plaintext 
  1. $trescTaba.show();
[HTML] pobierz, plaintext


i 

[HTML] pobierz, plaintext 
  1. $trescTaba.hide();
[HTML] pobierz, plaintext


odpowiada za pokazanie i ukrycie taba, a to działa. Nie rozumiem więc czemu funkcja

[HTML] pobierz, plaintext 
  1. $trescTaba.prop('required', true);
[HTML] pobierz, plaintext


i

[HTML] pobierz, plaintext 
  1. $trescTaba.prop('disabled', true);
[HTML] pobierz, plaintext


nie chcą działać po kliknięciu w link, który aktywuje dengo taba :/

Daję demko na serwerze

http://jsfiddle.net/cz2boadb/
salfunglandyare
12.05.2015, 18:00:31
Zdarzenie dodania/usuniecia atrybutu powinno być umieszczone podczas kliknięcia:
http://jsfiddle.net/9cpwjrvp/
rucin96
12.05.2015, 20:24:52
Dziękuję bardzo smile.gif)
O to właśnie chodziło!
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.