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.