creazione div automatica

nicoct

Nuovo Utente
5 Mag 2013
16
0
0
salve a tutti,
sto imparando da poco jquery dovrei creare un funzione che al clic su un primo div già esistente sulla pagina lo rimpiazzi con un altro div in una posizione diversa e cosi via fino ad un limite di volte che poi imposterò con un ciclo.
HTML:
<script>
	$(function(){
		$("div").click(function(){
			$("div").replaceWith("<div></div>");
			$("div").css("top",<?php echo rand(0,600) ?>);
			$("div").css("left",<?php echo rand(100,1200) ?>);
		});
	});
</script>
questa funzione rimpiazza il div con un altro e tramite i css mette il nuovo div in un altra posizione casuale il problema è che funziona una volta soltanto dopo di che lo script si blocca,
come dovrei fare a far leggere anche il nuovo div alla funzione?
 
Ultima modifica di un moderatore:

Nefyt

Utente Attivo
17 Apr 2012
1.102
0
0
Prova generando la nuova posizione dal js, sennò il php la genera soltanto una volta
Codice:
$("div").css("top",Math.floor(Math.random()*600));
$("div").css("left",Math.floor(Math.random()*1100)+100);
 

nicoct

Nuovo Utente
5 Mag 2013
16
0
0
grazie ma purtroppo ancora non funziona, metto il codice completo di tutta la pagina perché forse c'è qualcosa di sbagliato fuori dalla funzione:
Codice:
<html>
	<head>
		<style>
			div{
				background-color:#f00;
				width:100px;
				height:100px;
				position:fixed;
				top:100;
				left:500;
			}
			input{
				color:#000;
				border:0px solid #f00;
				top :20px;
				left:20px;
			}
		</style>
		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
		<script>
			$(function(){
				punti=0;
				
				$("div").click(function(){
					punti=punti + 1;
					$("input").attr("value",punti);
					
					$("div").replaceWith("<div></div>");
					$("div").css("background-color","#ff0");
					$("div").css("top",Math.floor(Math.random()*600));
					$("div").css("left",Math.floor(Math.random()*1100)+100);
				});
				
			});
			
		</script>
	</head>
	<body>
		<table width="1200px" height="700px" border="2">
			<tr>
				<td width="100px" valign="top">
					punteggio
					<input type='text' value='inizia' size='5'>
				</td>
				<td>
					<div align='center' valign='middle'>
						clicca qui
					</div>
				</td>
			</tr>
		</table>
	</body>
</html>
 

Nefyt

Utente Attivo
17 Apr 2012
1.102
0
0
Prova cosi, è questo che intendevi?
Codice:
$(function(){
				punti=0;
				
				$("div").click(function(){
					punti++;
					$("input").attr("value",punti);
					
					$("div").css("background-color","#ff0");
					$("div").css("top",Math.floor(Math.random()*600));
					$("div").css("left",Math.floor(Math.random()*1100)+100);
                                        $("div").html("Clicca");
				});
				
			});
 

nicoct

Nuovo Utente
5 Mag 2013
16
0
0
Perfetto grazie ora funziona.
praticamente hai sostituito
Codice:
$("div").replaceWith("<div></div>");
con
Codice:
$("div").html("Clicca");
potresti spiegarmi il perché?
 

Nefyt

Utente Attivo
17 Apr 2012
1.102
0
0
Perché non c'era bisogno di rimpiazzarlo, replaceWith() toglieva l'elemento direttamente dal dom della pagina e non veniva più letto

L'ultimo pezzo con .html() lo puoi anche togliere, era come esempio