How to tell if <img> has href attribute?

Question

So I have a simple slideshow using JavaScript to fade images in and out, where all but one of the img elements do not have a href attribute. I would like to put the href attribute of the image into the href attribute of the caption (actually the img alt attribute) so that the text is clickable when the particular slide shows up, and becomes unclickable when the slide goes to the next one. I am very inexperienced in JS and cannot find any resources online to help me with this particular issue. Here is the part of my HTML file (called Finley.html) that is used, and my slideshow.js file.

<section>
  <!-- Slideshow -->
  <h2 id="caption">Car ride home! First time meeting each other.</h2>
  <img id="slide" src="images/Finley/car_ride_home.jpg" alt="">
  <div id="slides">
    <img src="images/Finley/car_ride_home.jpg" alt="Car ride home! First time meeting each other.">
    <img src="images/Finley/he_lay.jpg" alt="Handsome boy!">
    <img src="images/Finley/awwww.jpg" alt="First photo together">
    <img src="images/Finley/photogenic_af.jpg" alt="Papa, we made it to the community Instagram!" href="https://google.com" target="_blank">
    <img src="images/Finley/first_vet.jpg" alt="First vet trip was successful">
    <img src="images/Finley/blop.jpg" alt="blop.">
    <img src="images/Finley/squishy_cheek.jpg" alt="Car rides make me sleepy">
    <img src="images/Finley/first_beach.jpg" alt="First time at the beach and I got rocked by the waves">
    <img src="images/Finley/sploot.jpg" alt="sploot.">
    <img src="images/Finley/floopy_ears.jpg" alt="My family loves how floopy my ears are!">
    <img src="images/Finley/daisy_gf.jpg" alt="Playing with my friend Daisy!">
  </div>
</section>

slideshow.js:

$(document).ready(function() {
      //declare variables
      var nextSlide = $("#slides img:first-child");
      var nextCaption;
      var nextSlideSource;
      // the function for running the slide show    
      var runSlideShow = function() {
        // write the function 
        $("#caption").fadeOut(1000);
        $("#slide").fadeOut(1000,
          function() { //callback function
            if (nextSlide.next().length == 0) {
              nextSlide = $("#slides img:first-child");
            } else {
              nextSlide = nextSlide.next();
            }
            nextSlideSource = nextSlide.attr("src");
            nextCaption = nextSlide.attr("alt");

            if (nextCaption == "Papa, we made it to the community Instagram!") {
              $("#caption").attr("href", nextSlide.attr("href"); $("#caption").attr("target", nextSlide.attr("target");
                }

                $("#slide").attr("src", nextSlideSource).fadeIn(1000); $("#caption").text(nextCaption).fadeIn(1000);

              }
            ); //callback
          }; //ready

          // start slide show
          var timer1 = setInterval(runSlideShow, 5000);


          // here's one way to code this app without using the toggle event method
          $("#slide").click(function() {
            if (timer1 != null) {
              clearInterval(timer1);
              timer1 = null;
            } else {
              timer1 = setInterval(runSlideShow, 1000);
            }
          });
        })

This code displays the caption as text above the image, and the image stays on screen for 5 seconds before fading to the next image. To clarify, I'd like the caption text that appears to become a hyperlink to Google (actual site censored) for the one picture when it is displayed, and then return to normal once the next picture comes up. I tried putting line 21-24 in to test for the caption and set the attribute, but those lines stop the slideshow from working (remove those lines to see how it should behave). Maybe it's something in the if statement in line 21, but I'm not sure how to proceed. Any help or tips would be appreciated!

Answer 1

You can do it either like this:

this.hasAttribute('href');

or

$(this).is('[href]');

More Info