Wątek przeniesiony 2014-11-15 23:41 z Webmastering przez dzek69.

Pętla dla pobierania kolejnych ID

0

Hej,
potrzebuję umieścić na stronie elementy, które po najechaniu na nie myszą znikają i pojawia się kolejny element o id+1
są to divy o id1-26, pierwszy widoczny jest od razu po załadowaniu strony

stworzyłam taką pętlę, niestety po najechaniu na el.1 od razu przenosi do 26, gdzie jest błąd? :)

function pokaz() {

        for (var i = 1; i <= 26; i++) {
        var chmurka = document.getElementById(i+1);
        var chmurka2 = document.getElementById(i);
        chmurka.className=('wlaczony');
        chmurka2.className=('wylaczony');
        };

pzdr

poprawienie tytułu i uzupełnienie tagów wątku - @furious programming

0

zastosuje metode zoltej kaczuszki:)

wytlumacz sobie krok po kroku co twoj kod robi:

dla pierwszego kroku

for (var i = 1; i <= 26; i++) {
        var chmurka = document.getElementById(i+1);
        var chmurka2 = document.getElementById(i);
        chmurka.className=('wlaczony');
        chmurka2.className=('wylaczony');
        };
//i = 1
 //wez element o id 2 i go pokaz a element o id = 1 schowaj

dla drugiego kroku

for (var i = 1; i <= 26; i++) {
        var chmurka = document.getElementById(i+1);
        var chmurka2 = document.getElementById(i);
        chmurka.className=('wlaczony');
        chmurka2.className=('wylaczony');
        };
//i = 2
 //wez element o id 3 i go pokaz a element o id = 2 schowaj

...

dla ostatniego kroku

for (var i = 1; i <= 26; i++) {
        var chmurka = document.getElementById(i+1);
        var chmurka2 = document.getElementById(i);
        chmurka.className=('wlaczony');
        chmurka2.className=('wylaczony');
        };
//i = 26
 //wez element o id 26 i go pokaz a element o id = 25 schowaj

teraz petla sie zakonczy i bedziesz miala 25 elementow ukrytych i 26 pokazany.

po najechaniu myszka odpalaj funkcje ktora pobierze aktualne id elementu i podbijajac je o jeden (oczywiscie wczesniej sprawdz wyjscie poza zakres) pokaze nastepny. PETLA JEST TU ZBEDNA :)

0

jest jakiś prosty sposób aby pobrać id za pomocą czystego java scriptu czy muszę użyć do tego jquery?

0

dlaczego to nie działa?

function pokaz() {

        var i=this.id;
        var chmurka = document.getElementById(i+1)
        var chmurka2 = document.getElementById(i);
        chmurka.className=('wlaczony');
        chmurka2.className=('wylaczony');
    
}
0
var Active=null;
function pokaz()
  {
   if(Active!=null) Active.className='wylaczony';
   Active=document.getElementById(this.id);
   Active.className='wlaczony';
  }
0
_13th_Dragon napisał(a):
var Active=null;
function pokaz()
  {
   if(Active!=null) Active.className='wylaczony';
   Active=document.getElementById(this.id);
   Active.className='wlaczony';
  }

to nie będzie to...

w ogóle nie działa mi odwołanie do id obiektu poprzez this.id
nie działa nawet taki prosty kod:

function pokaz()
  {
    var chmurka = document.getElementById(this.id);
    chmurka.className=('wylaczony');
  }

co robię źle?

0

_13th_Dragon możesz rozwinąć myśl, że wstawiam w złym miejscu?

0

Z tego co mówisz ten pokaz() nie jest w żadnej klasie ani jest częścią jakiegoś zdarzenia.
this.Id - u ciebie nie istnieje, więc przekaż aktualne Id jako parametr.

0

pokaz() jest wywolywane przez <p onmouseover="pokaz()">

czy masz na myśli to, że jeśli używam 'this' to powinnam utworzyć funkcję main czy coś podobnego? u mnie to wygląda tak, że w <script></script> znajduje się wyłacznie funkacja pokaz()

`dodanie znaczników ``` - @furious programming

0
<p onmouseover="pokaz(this)">
var Active=null;
function pokaz(Over)
  {
   if(Active!=null) Active.className='wylaczony';
   Active=Over;
   Active.className='wlaczony';
  }
0
<!doctype html>
<html>
	<head>
		<link rel="stylesheet" href="test_style.css">
	</head>
	<body>
		<div id="1" class="wlaczony" style="background-color: red; padding: 10px; width: 50px; text-align: center" onmouseover="pokaz(this)">
			ALA		
		</div>
		<div id="2" class="wylaczony" style="background-color: blue; padding: 10px; width: 50px; text-align: center" onmouseover="pokaz(this)">
			MA		
		</div>
		<div id="3" class="wylaczony" style="background-color: yellow; padding: 10px; width: 50px; text-align: center" onmouseover="pokaz(this)">
			KOTA	
		</div>

		<script type="text/javascript">

			var Active=null;
			function pokaz(Over)
  			{
   			if(Active!=null) Active.className='wylaczony';
   			Active=Over;
   			Active.className='wlaczony';
  			}

		</script>

	</body>
</html>
.wylaczony{
	visibility: hidden;
}
.wlaczony{
	visibility: visible;
}

chodzi o to aby pierwszy element po najechaniu na niego znikł i pojawił się drugi

niestety ten kod działa w ten sposób, że jeśli są co najmniej dwa widoczne to pierwszy znika dopiero no najechaniu na drugiego

0

to musisz oprogramować jeszcze onmouseout

0

ale chcę aby obiekt znikał w momencie najechania na niego myszą i jednocześnie pojawiał się kolejny

1 użytkowników online, w tym zalogowanych: 0, gości: 1