CODEWITHSUNDEEP
jqueryhtmlfunction
D_Wagner
D_Wagner

Reputation: 87

Jquery .click() script order

I have several different radiobuttons. When each one is clicked the corresponding image will fade in. Except it will only work in the order the functions are written in. When the fourth function is called all others before it will not work. I want to be able to press all of them in whatever order.

RELEVANT HTML:

<fieldset id = "field3">
<legend>Order </legend>
<p> One Album Per Order</p> 
<p> Prices shown are without tax </p>
<input type = "radio" name ="jayz" value="rDbt" id= "rD">[1996]Reasonable Doubt-$25 <br>
<input type = "radio" name ="jayz" value="bPrint" id= "bP1">[2001]The Blueprint-$10<br>
<input type = "radio" name ="jayz" value="bPrint2" id = "bP2">[2002]The Blueprint 2-$15<br>
<input type = "radio" name ="jayz" value="kCome" id ="kC">[2006]Kingdom Come-$10<br>
<input type = "radio" name ="jayz" value="bPrint3" id ="bP3">[2009]The Blueprint  3-$25<br>
<input type = "radio" name ="jayz" value="mCarta" id ="mC">[2013]Magna Carta-$30<br>
<div id="q">
# of Albums:
<input type="text" name="quant" id="qntty" >
</div>
</fieldset>

<aside>
<div id = "divvy">
<img src="images/rDoubt.jpg" alt="Reasonable Doubt" height="400px" width="400px" id= "rDi">
<img src="images/bPrint.jpg" alt="the Blueprint" height="400px" width="400px" id= "bP1i">
<img src="images/bPrint2.jpg" alt="the Blueprint 2" height="400px" width="400px" id = "bP2i">
<img src="images/kCome.jpg" alt="Kingdom Come" height="400px" width="400px"  id ="kCi">
<img src="images/bPrint3.jpg" alt="the Blueprint 3" height="400px" width="400px"  id ="bP3i">
<img src="images/mCarta.jpg" alt="Magna Carta" height="400px" width="400px" id ="mCi">

</div>

</aside>

JQUERY:

jQuery(function(){

$('#rDi').hide();
$('#bP1i').hide();
$('#bP2i').hide();
$('#kCi').hide();
$('#bP3i').hide();
$('#mCi').hide();


});



//Reasonable Doubt
jQuery(function(){
$('#rD').click(function(){
if($('#rD').is(':checked'))
{
    $('#rDi').fadeIn(3000);

}
else
{
    $('#rDi').fadeOut(2000);

}
});
});
//Blueprint
jQuery(function(){
$('#bP1').click(function(){
if($('#bP1').is(':checked'))
{
    $('#bP1i').fadeIn(3000);
}
else
{
    $('#bP1i').fadeOut(2000);

}
});
});
//Blueprint2
jQuery(function(){
$('#bP2').click(function(){
if($('#bP2').is(':checked'))
{
    $('#bP2i').fadeIn(3000);
}
else
{
    $('#bP2i').fadeOut(2000);

}
});
});

//Kingdom Come
jQuery(function(){
$('#kC').click(function(){
if($('#kC').is(':checked'))
{
    $('#kCi').fadeIn(3000);
}
else
{
    $('#kCi').fadeOut(2000);

}
 window.location.reload(true);
});
});

//Blueprint3
jQuery(function(){
$('#bP3').click(function(){
if($('#bP3').is(':checked'))
{
    $('#bP3i').fadeIn(3000);
}
else
{
    $('#bP3i').fadeOut(2000);

}
});
});

//Magna Carta
jQuery(function(){
$('#mC').click(function(){
if($('#mC').is(':checked'))
{
    $('#mCi').fadeIn(3000);
}
else
{
    $('#mCi').fadeOut(2000);

}
});
});

Upvotes: 0

Views: 53

Answers (2)

dave
dave

Reputation: 2911

You could probably make life easier for yourself by putting a click event listener on all of the radio buttons, picking up the id of the clicked radio button then using that to determine which image to display.

Additionally it would be easier to use CSS classes to hide and show your images. Here's an example:

<!-- add this class to all of your images. it'll make them all hidden by default -->
...
<img class="hidden" src="images/rDoubt.jpg" alt="Reasonable Doubt" height="400px" width="400px" id= "rDi">
...

And then add this CSS. The hidden class will hide your images

.hidden { display:none; }

Then try this jQuery instead:

$( document ).ready(function() {

    // listen for a click event on any radio element

    $('input[type="radio"]').click(function() { 

        // get the id of the clicked element
        var id = $(this).attr('id');

      // fade out any existing image elements
      $('img').fadeOut(500, function() {

        // fade in the image element with the id we're after, with a half second delay (500 milliseconds)
        setTimeout(function() {
            $('#' + id + 'i').fadeIn(500);

        }, 500); 
      });

    });

});

Here's jsfiddle: https://jsfiddle.net/gk12s3p5/

Upvotes: 1

DinoMyte
DinoMyte

Reputation: 8868

Try this. It's a much simplied version of what you are doing.

$(document).ready(function(){

   $('img').hide();
   $('input:radio').click(function()
   {  
      $('img').hide(); // you may use this too -> $('img').fadeOut(3000); 
      if($(this).is(':checked'))
        $("#" + this.id + "i").fadeIn(3000); // target the corresponding id of the image by appending 'i' to the radio button's id
    });
});

Working example: https://jsfiddle.net/o9krfznt/7/

Upvotes: 2

Related Questions