Question

week

DKK

” id=”radio2″ value=”75″ />

I have bunch of these div entry generated by while loop so I want to achieve this : WHEN input inside entry is clicked I want background image of entry div to change, but if I choose another radio in another entry div .. I’d like all previous changes( such as previous change of background) to go away and to change background of current div .. here is what I tried to do maybe you can help .. here is jquery below

$("input").click(function() {

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

             });

Something is malfunctioning .. I mean code inst’ working at all .. can anyone help me ? thank you

---

I’ve tried both this :

$("input").click(function() {
                 $("input").each(function() {
                     if (this.checked) {
                         $(this).parent("div").addClass("highlight");
                     }
                     else {
                         $(this).parent("div").removeClass("highlight");
                     }
                 });
             });

AND

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

for some reason its not working at all not changing the background , maybe it has to do something with the code above here is the complete script :

 <script type="text/javascript">

         $(document).ready(function() {

             $(".left_navigation a:last").toggleClass('bolder');


             $("input").each(function() {
                 var element_value = $(this).val();
                 $(this).prev("p").append(" " + element_value + ",-");
             });


             $("input").click(function() {
                 $("input").each(function() {
                     if (this.checked) {
                         $(this).parent("div").addClass("highlight");
                     }
                     else {
                         $(this).parent("div").removeClass("highlight");
                     }
                 });
             });




         });

</script>

Answer 1

The first immediate problem I see is that your jQuery is missing a }); at the end of it unless you just forgot to paste it there. That would stop it from doing anything other than throwing an error…

This is a simplified version of you’ve tried before. It might at least make debuging slightly easier.

<script type="text/javascript">
$(document).ready(function(){
    $("input").click( function() { 
         $("input").parent("div").removeClass("highlight");
         $(this).parent("div").addClass("highlight");
      });
  });
</script>

Although, I don’t see anything obviously wrong about what you tried before which makes me wonder if $("input") is matching what you think it is. I would probably at least alert some things inside your click function for sanity checking. I’ve actually found a few times that my $(document).ready was firing before I thought it was i.e. before my inputs were ready because of my framework…