Jquery seleziona div in una riga

Question

Sono davvero bloccato .. Ho bisogno di un consiglio urgente: D ecco il mio html:

<!-- Beginning of ROW !-->
<div id="row1">
 <div id="entry">
  free
  <span>some text</span>
  <p>DKK</p>
  <input type="radio" name="red<% Response.Write(counter); %>" id="radio" value="0" />
 </div>

 <div id="entry">
  week
  <span></span>
  <p>DKK</p>
  <input type="radio" name="red<% Response.Write(counter); %>" id="radio2" value="75" />
 </div>
</div>
<!-- End of ROW !-->

<!-- Beginning of ROW !-->
<div id="row2">
 .... same as in row 1
</div>
<!-- End of ROW !-->

nth row ..

Ecco Jquery:

$("input").click(function() {
     $("input").parent("div").css("background", "url(images/div_bg.png)");
     $(this).parent("div").css("background", "url(images/div_bg_hover.png)");
});

Quello che sto cercando di fare .. è quando seleziono un ingresso radio il div in cui si trova dovrebbe cambiare sfondo e funziona perfettamente se c'è solo una riga, ma per esempio se provo a selezionare il valore nella prima riga quindi seleziono il valore nella seconda riga .. il div nella seconda riga in cui si trova l'ingresso radio cambia lo sfondo come dovrebbe, ma il div nella prima riga si inverte ad altro sfondo anche se l'input è rimasto controllato .. ecco cosa sono cercando di raggiungere

Ed ecco cosa ottengo:

Answer 1

Qual è lo scopo della tua seconda linea di jquery?

$("input").parent("div").css("background", "url(images/div_bg.png)");

Questo ripristinerà lo sfondo di tutte le voci " voce " div. Se capisco correttamente il tuo obiettivo, penso che tu voglia:

$(this).parent("div").siblings("div.entry").css("background", "url(images/div_bg.png)");

In questo modo solo i fratelli della voce che stai modificando verranno ripristinati i loro sfondi.

In una nota a margine, hai più div con lo stesso ID, il che non è una buona idea.

Answer 2

Questa riga: $ (" input "). parent (" div "). css (" background " ;, " url (images / div_bg.png) " sta causando tutti gli altri elementi vengono ripristinati alla normalità, consentendoti di avere solo 1 stato attivo alla volta. Puoi spostarlo nella riga in modo che ogni riga possa avere un elemento selezionato.

Answer 3

Stai assegnando il comportamento solo all'elemento selezionato, piuttosto che a tutte le caselle di input selezionate. Potresti voler fare una funzione come tale:

function foo()
{
   $('input :selected').css(bar);
}

Ora ogni volta che ricevi un evento click su un evento input, chiama la barra. Potrebbe essere necessario modificare foo per soddisfare le tue specifiche.