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

Question

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

<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);
            }
          });
        })

此代码将标题显示为图像上方的文本，图像将在屏幕上停留5秒钟，然后淡出到下一个图像。为了澄清，我希望标题文本在显示一个图片时显示为Google (实际网站审查)的超链接，然后在下一张图片出现时恢复正常。我试着将21-24行放入来测试标题并设置属性，但这些行阻止了幻灯片的播放(删除这些行以查看它的行为)。也许在第21行的if语句中有一些东西，但我不确定如何继续。如有任何帮助或建议，我们将不胜感激！

Answer 1

你可以像这样做：

this.hasAttribute('href');

或

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

More Info