creazione div automatica

nicoct · 7 Mag 2013

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?

Nefyt · 7 Mag 2013

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 · 7 Mag 2013

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 · 7 Mag 2013

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 · 7 Mag 2013

Perfetto grazie ora funziona.
praticamente hai sostituito

Codice:

$("div").replaceWith("<div></div>");

con

Codice:

$("div").html("Clicca");

potresti spiegarmi il perché?

Nefyt · 7 Mag 2013

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

Cerca

Cerca

creazione div automatica

nicoct

Nuovo Utente

Nefyt

Utente Attivo

nicoct

Nuovo Utente

Nefyt

Utente Attivo

nicoct

Nuovo Utente

Nefyt

Utente Attivo

Discussioni simili