Jquery select div in row

I'm really stuck .. I need some urgent advice: D here is my 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 ..

      

Here is 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)");
});

      

What I am trying to do .. is when I select a radio input, the div it is in should change the background and it works fine if there is only one line, but for example if I try to select a value on the first line then I select the value in the second row .. the div in the second row where the radio input is located changes the background as it should, but the div in the first row flips over to a different background even though the input stays checked .. this is what I am trying to achieve

alt text

And here's what I want:

alt text

+2


source to share


3 answers


What is the purpose of your second jquery line?

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

      

This will reset the background of all "posts" div. If I understand your purpose correctly, I think you want:



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

      

This way, only the siblings of the entry you change will get their backgrounds reset.

On a side note, you have multiple divs with the same id, which is not good.

+3


source


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

causes all other reset items to be normal, allowing only one active state at a time. You can span it in a row so that each row can have one selected item.



0


source


You are assigning behavior to the selected item only, not all selected input fields. You might want to make a function like this:

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

      

Now when you receive a click event on the input event, the call bar. You may need to modify foo to suit your requirements.

0


source







All Articles