DaemonForums  

Go Back   DaemonForums > Miscellaneous > Programming

Programming C, bash, Python, Perl, PHP, Java, you name it.

Reply
 
Thread Tools Display Modes
  #1   (View Single Post)  
Old 9th September 2009
c0mrade's Avatar
c0mrade c0mrade is offline
Port Guard
 
Join Date: May 2008
Posts: 41
Thanked 0 Times in 0 Posts
Default confusing row selector

Hiya all, I'm really stuck .. here is my html :
Code:
<!-- Beginning of ROW !-->
<div id="row1">
<div class="entry">
free
<span>some text</span>
<p>DKK</p>
<input type="radio" name="row<?php echo $counter?>" id="radio" value="0" />

</div>

<div class="entry">
week
<span></span>
<p>DKK</p>
<input type="radio" name="row<?php echo $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

Code:
$("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'm trying to do .. is when I select a radio input the div in which it is located should change background and it works perfectly if there is only one row, but for instance if I try to select the value in first row then I select value in second row.. the div in second row where radio input is located changes background as it should but the div in first row reverse itself to other background although input remained checked .. here is what I'm trying to achieve


And here is what I achieve :

Reply With Quote
  #2   (View Single Post)  
Old 21st September 2009
owda owda is offline
New User
 
Join Date: Jun 2009
Posts: 1
Thanked 0 Times in 0 Posts
Default

Your selector, $("input"), is selecting every input element on the page. So when you write:

Code:
$("input").parent("div").css("background", "url(images/div_bg.png)");
You are setting the parent div element of every radio button (including neighbor rows) to the black background, before setting the current one green.

Make the selector specific to each row (#row1, #row2), like this:

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

  $("#row2 input").click(function() {
                      $("#row2 input").parent("div").css("background", "url(images/div_bg.png)");
                      $(this).parent("div").css("background", "url(images/div_bg_hover.png)");
                                            });
Being more specific will ensure that selecting a radio button from another row will not interfere with its neighbors.

It's good practice to be as specific as possible with jQuery selectors, otherwise they may step beyond their initial purpose and interfere with other elements. The selector $("input") would also select the other types of input element (textbox, checkbox, button etc.) if you were to add them later.

You can use the pseudo-selector :radio to only select radio buttons, e.g. $("input:radio"). There's more information and a full reference of these pseudo-selectors on the jQuery documentation website under Selectors.
Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 02:52 PM.


Powered by vBulletin® Version 3.8.4
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
Content copyright © 2007-2010, the authors
Daemon image copyright ©1988, Marshall Kirk McKusick