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

问题描述

所以我有一个使用 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 秒钟，然后淡入下一个图像。为了澄清，我希望标题文本在显示一张图片时似乎成为谷歌的超链接（实际网站审查），然后在下一张图片出现后恢复正常。我尝试将第 21-24 行放入以测试标题并设置属性，但这些行阻止了幻灯片的工作（删除这些行以查看它的行为方式）。也许这是第 21 行 if 语句中的内容，但我不确定如何继续。任何帮助或提示将不胜感激！

标签： javascriptjqueryhtml

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

问题描述

解决方案

推荐阅读