samedi 27 octobre 2018

jQuery Radio Buttons If/Else

I need to have it so When the user clicks on an image, you should append to some nearby div (), the filename (if they clicked that radio button) or the alt attribute value (if they clicked on the description radio button). You will probably need to use the 'this' attribute for this part. You want to display the alt and src in a new window. Right now I don't think the varsrc and varalt are working. I had window.open in the if statement but whne i clicked the button it would open a new window so I got rid of that line.

HTML:

<div id="radio_images">
File Name   <input type="radio" name="imageselect" value="filename">    <br>
Description  <input type="radio" name="imageselect" value="description" checked>    <br>
</div>

<div id ="image_output">
</div>

<div id="images">
<h3>Some Images</h3>
    <p><img src="firetruck.jpg" alt="pic of truck">  |
    <img src="baseball.jpg" alt="pic of baseball" >  |
    <img src="soccer_ball.jpg" alt="pic of soccer ball" >
    </p>
</div>

Script:

<script>
//If double click the image it will open in a new tap
$(document).on('dblclick', 'img', function () {
  var imgurl = window.location.pathname + $(this).attr('src');
  window.open(imgurl, '_blank');
});

//If/Else for Radio Buttons Need to display with image on other page when user double clicks on the image
$("input[name=imageselect]:radio").click(function () {
  var imgurl = window.location.pathname + $(this).attr('src');

  if ($('input[name=imageselect]:checked').val() == "filename") {
    var varsrc = $(this).attr('src');
    //window.open(imgurl, '_blank', $(this).attr('src'));
  } else 
    var varalt = $(this).attr('alt');
    //window.open(imgurl, '_blank', $(this).attr('alt'));
});
</script>

Aucun commentaire:

Enregistrer un commentaire