javascript - 如何判断<img>是否有href属性？

Question

所以我有一个简单的幻灯片，使用 JavaScript 来淡入和淡出图像，其中除了一个 img 元素之外的所有元素都没有 href 属性。我想将图像的 href 属性放入标题的 href 属性(实际上是 img alt 属性)，以便当特定幻灯片显示时文本可单击，而当幻灯片转到下一张时文本不可单击。我对 JS 非常缺乏经验，无法在网上找到任何资源来帮助我解决这个特定问题。这是我的 HTML 文件(称为 Finley.html)中使用的部分，以及我的 Slideshow.js 文件。

<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>

幻灯片.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);
            }
          });
        })

此代码将标题显示为图像上方的文本，并且图像在屏幕上停留 5 秒，然后淡出到下一个图像。为了澄清这一点，我希望标题文本在显示时成为一张图片的 Google(实际网站经过审查)的超链接，然后在下一张图片出现时恢复正常。我尝试将第 21-24 行放入测试标题并设置属性，但这些行使幻灯片无法正常工作(删除这些行以查看其行为方式)。也许是第 21 行 if 语句中的内容，但我不知道如何继续。任何帮助或提示将不胜感激!

Answer 1

你可以这样做:

this.hasAttribute('href');

或

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

More Info