JQuery - lanciare una funzione su un div specifico

**WebMinus** · 11-02-2012, 17:27

Ciao a tutti. Premetto che sono un principiante di JQuery e che ho provato a cercare fuori e dentro questo forum, ma non sono riuscito a trovare la mia risposta, che sono sicuro sarà banalissima, ma proprio non riesco a scovare.

Ho creato un codice di esempio, anche se il problema è su un DOM più articolato. Ecco il codice:

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Abadambembo </title>
<script type="text/javascript" src="js/jquery_core.js" charset="utf-8"></script>
<script type="text/javascript" src="js/jq.js" charset="utf-8"></script>
<style type="text/css">
	#main {
		width: 100%;
	}
	.content {
		background-color: lime;
		width: 60%;
		margin: 0 auto;
	}
	.box, .box2 {
		margin: 20px auto;
		padding: 20px;
		width: 100px;
		height: 100px;
	}
	.box {
		background-color: aqua;		
	}
	.box2 {
		background-color: blue;		
	}
</style>
</style>
</head>
<body >
<div id="main">
<div class="content">
	

CLASS CONTENT</p>
	<div class="box">
		<p class="par">CLASS BOX</p>	
	</div>
	<div class="box2">
		<p class="par2">CLASS BOX2</p>	
	</div>
</div>
<div class="content">
	

CLASS CONTENT</p>
	<div class="box">
		<p class="par">CLASS BOX</p>
	</div>
	<div class="box2">
		<p class="par2">CLASS BOX2</p>	
	</div>
</div>
<div class="content">
	

CLASS CONTENT</p>
	<div class="box">
		<p class="par">CLASS BOX</p>
	</div>
	<div class="box2">
		<p class="par2">CLASS BOX2</p>	
	</div>
</div>
<div class="content">
	

CLASS CONTENT</p>
	<div class="box">
		<p class="par">CLASS BOX</p>
	</div>
	<div class="box2">
		<p class="par2">CLASS BOX2</p>	
	</div>
</div>
</div>

</body>
</html>

Di seguito il codice JQuery relativo al file jq.js (incorporato nell'head, insieme alla libreria core jquery)

codice:

	$(document).ready(function(){
		$('.box').click(function(){
			$(this).parent().click(function(){
				$('.box2', this).css('background-color', 'white')
							})
			
		})
	});

Io vorrei lanciare la funzione senza l'evento click. Vorrei insomma creare una funzione che lavori esclusivamente su di un div selezionato, senza interagire con gli altri div con la stessa classe.

Qui, nello specifico, vorrei che al click sul div box cambi il colore di sfondo del div box2 contenuto nello stesso div content.

Grazie.

**thecodingmonk** · 11-02-2012, 21:09

Il tuo codice è sbagliato perché non ha molto senso... insomma tu associ al click su box una funzione che associa al click su box2 il cambio del colore.

Questo dovrebbe funzionare:

codice:

$(function() {
	$('.box').click(function() {
		$(this).parent().find('.box2').css('background-color', 'red');
	});
});

**WebMinus** · 12-02-2012, 13:21

Esatto, così, non ha molto senso. Io vorrei associare al click su box1 il cambio di colore a box2. Ho inserito il secondo click perchè non so come far partire la funzione senza associarla ad un evento. Ho provato a sostituire ready a click, ma è come se mi perdesse le selezioni che ho fatto. Mmm... non so se mi sono spiegato. Insomma, il mio questito stra proprio in quel secondo click. avrei potuto metterci dei puntini di sospensione al suo posto. Vorrei applicare la funzione alla selezione che c'è prima di questo secondo click ma non ci riesco.

**WebMinus** · 12-02-2012, 13:24

Il tuo script funziona, ma non risponde alla mia domanda. IL DOM del mio esempio è semplice, ma è solo un esempio per capire come applicare una funzione ad un preciso elemento che però è una class. Se le istruzioni fossero numerose e coinvolgessero molti elementi, (non fossero cioè una semplice azione .css), sarebbe forse più chiaro il mio quesito. Mmm... mi sono spiegato bene? non ne sono sicuro. :9

**Xinod** · 12-02-2012, 13:47

la risposta l' hai gia': se al click il contenitore di riferimento e'
$(this).parent()
da li' trovi qualsiasi elemento in esso contenuto usando qualsiasi combinazione di selettori,
per esempio .find('.box2')

se la struttura e' piu' complessa dovrai usare altri metodi di traversing, o raffinare la tua selezione via via

quindi non si capisce bene il tuo dubbio

**WebMinus** · 13-02-2012, 11:02

Allora, provo ancora una volta, poi, se non riesco a spiegarmi, posto il codice originale. Sono reticente nel farlo perchè essendo appunto un po' più complesso dell'esempio temo che faticherei ancora di più a spiegare cosa vorrei sapere e otterrei soluzioni alternative al problema. Cmq. Procedo.

Innanzitutto, non concentriamoci sull'obiettivo finale, che è solo un esempio, ma sul modo di raggiungerlo. Io vorrei raggiungerlo proprio come lo scrivo. E cioè:

- STEP 1: quando il documento è pronto lancio la funzione...:

codice:

$(document).ready(function(){

- STEP 2: Quando uno qualsiasi dei box con class "box" viene cliccato...:

codice:

$('box').click(function(){

- STEP 3: ...allora lancio una funzione che sia valida solo all'interno del content relativo al box cliccato, e che non valga per gli altri div class "content":

codice:

$(this).parent()???(function(){

E' proprio qui il punto cruciale. Io voglio selezionare un preciso elemento, e lo faccio tranquillamente attraversando il DOM. Poi però, voglio lanciare una funzione. Questa funzione deve partire subilto, senza essere collegata ad un evento. Ma non so come farlo (da qui i punti interrogativi, dove ipotizzo ci sia qualcosa. Io ho provato a metterci ready, ma non funziona)

- STEP 4: all'interno dell'ultima funzione, che nei miei piani agisce solo sul div "content" selezionato, eseguo tutte le cose che voglio, su ogni elemento contenuto. Poi chiudo tutto:

codice:

				$('.box2', this).css('background-color', 'white'),
				$('.box1', this).css('width', '130px'),
				$('.content', this).css('border', '1px solid white'),
				$('.box2 p', this).css('color', 'lime')
							})
			
		})
	});

Spero di essere stato chiaro. Una volta che ho selezionato il mio "ambiente" attraversando il DOM, come faccio a lanciare una funzione che riguardi solo quel determinato ambiente, ma senza associare la funzione in questione ad un evento?

**WebMinus** · 16-02-2012, 12:32

Scusate se uppo, mi da sempre un po' fastidio farlo, ma non riesco proprio a trovare una risposta al mio quesito. Non so nemmeno se sia possibile fare quello chiedo. Scusate, ma non so proprio come altro fare.

**Xinod** · 16-02-2012, 16:24

passa quell' elemento come argomento della funzione, no?

codice:

tuaFunzione($(this).parent())

function tuaFunzione($padre){
  // qui "$padre" e' il tuo this
  $('.box2', $padre).css('background-color', 'white')
}

**Xinod** · 16-02-2012, 16:25

P.s.
questo
$('.box2', $padre).css('background-color', 'white')

e' piu' efficente scritto
$padre.find('.box2').css('background-color', 'white')

**WebMinus** · 17-02-2012, 12:32

Grazie, in effetti non ci avevo pensato. Si vede che sono niubbo!

Il fatto è che proprio iniziando ora ad avvicinarmi a jquery, l'obiettivo è quello di comprendere a fondo le cose, i perchè e i percome. Quindi, se avete pazienza con me (vi prego abbiatene!

), seguite il mio ragionamento:

quando scrivo qualcosa come:

codice:

$(this).parent().find('.box2').css('background-color', 'red');

.parent e .find, se ho ben capito jquery, non sono semplici selezioni, ma vere e proprie azioni. Io mi sposto nel dom, faccio qualcosa. Nello stesso modo anche una funzione è un'azione. per concatenare azioni uso il punto, di solito, ma non riesco a concatenare una funzione. se scrivo

codice:

$(this).parent().find('.box2').function(//contenuto della funzione);

non va.

E' questo ragionamento che fa acqua, ma non capisco dove.

Infine ho provato a passare in funzione il "target" desiderato, ma non funziona. Sicuramente sbaglio qualcosa nella sintassi.

Vi lascio il codice del problema originale, anche se senza html, sperando si riesca a capire cosa voglio fare. Ovviamente il codice è sbagliato e non funziona.

codice:

$(document).ready(function(){
			var prova = $(this).parent().next();
	$('.buttonsworksdx').click(function(prova){
				
		if ($('.selected', this).is('.orizzontale > div:last')) {
			$('.selected', this).removeClass('selected');
			$('.orizzontale > div:first', this).addClass('selected');
		}
		else {
		$('.selected', this).next().addClass('selected');
		$('.selected:first', this).removeClass('selected');
		}
		
		$('div.scrollmask', this).scrollTo( $('.selected', this), {
														axis: 'x',
														easing: 'easeInOutExpo',
														duration: 'slow'
											});
	});
});

in particolare, così com'è la funzione, mi pare di capire che il "this" che inserisco all'interno degli elementi della funzione non faccia riferimento a quello che passo come target nella funzione stessa, ma si riferisca invece a '.buttomsworksdx', l'elemento interessato dall'evento click.

Scusate la pedanteria.

Discussione: JQuery - lanciare una funzione su un div specifico

Strumenti discussione

Ricerca discussione

Visualizza

JQuery - lanciare una funzione su un div specifico

Permessi di invio