你可以在 fadeIn Jquery 之后嵌入 SVG 的链接吗？

Question

您好，欢迎回答我的第一个问题。希望随着我的经验的增长回答一些问题，但直到那时，我欠别人的债。

第一次加载页面时，用户会看到各种各样的标志，根据他们选择的不同，其他标志会通过jquery的fadeIn和fadeOut函数来改变。

我的目标是让用户单击初始徽标，该徽标和其他徽标会在该位置发生变化，并且新徽标/图像后面会有 URL，当单击该 URL 时，会将用户引导至相关页面。

我的问题是我无法弄清楚新图像如何用作链接，而不是旧图像背后的 jquery。当前发生的是代码坚持淡出/淡入。

这是我使用的代码，其中图像替换为 Lorem Picsum 用于初始徽标和后续徽标。我将使用的图像是 SVG 图像 - 我正在考虑在 fadeIn 图像的 SVG 代码中嵌入链接的想法，但知道在我取消 fadeIn jquery 脚本之前它们将无法工作。

尝试过的想法： 在函数中的各个点使用 .stop 在代码中的各个点添加了 href 链接（这似乎是我的学习方式！打破它直到它工作） 搜索了各种我所追求的功能相似的网站。

认为这可能是足够的信息，但如果我遗漏了什么，请告诉我：)

非常感谢那些可能/可以提供帮助的人。

$(function() { //For first Logo
  $("#img").click(function() {
    $("#img").fadeOut(100, function() {
      $(this).attr('src', "https://picsum.photos/010").fadeIn()
      $("#img1").fadeOut(100, function() {
        $(this).attr('src', "https://picsum.photos/020").fadeIn()
        $("#img2").fadeOut(100, function() {
          $(this).attr('src', "https://picsum.photos/030").fadeIn()
        }) //Closes #img2 
      }) //Closes #img1
      ;
    }) //closes #img
    ;
  }) //closes .click
}); //closes first Logo jquery

$(function() { //For second Logo
  $("#img1").click(function() {
    $("#img").fadeOut(100, function() {
      $(this).attr('src', "https://picsum.photos/040").fadeIn()
      $("#img1").fadeOut(100, function() {
        $(this).attr('src', "https://picsum.photos/050").fadeIn()
        $("#img2").fadeOut(100, function() {
          $(this).attr('src', "https://picsum.photos/060").fadeIn()
        }) //Closes #img2 
      }) //Closes #img1
      ;
    }) //closes #img
    ;
  }) //closes .click
}); //closes second Logo jquery

$(function() { //For third Logo
  $("#img2").click(function() {
    $("#img").fadeOut(100, function() {
      $(this).attr('src', "https://picsum.photos/070").fadeIn()
      $("#img1").fadeOut(100, function() {
        $(this).attr('src', "https://picsum.photos/080").fadeIn()
        $("#img2").fadeOut(100, function() {
          $(this).attr('src', "https://picsum.photos/090").fadeIn()
        }) //Closes #img2 
      }) //Closes #img1
      ;
    }) //closes #img
    ;
  }) //closes .click
}); //closes third Logo jquery

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="section">
  <div class="grid">
    <div class="grid-item"><img src="https://picsum.photos/100" ID="img" width="300" height="100"></div>
    <div class="grid-item"><img src="https://picsum.photos/200" ID="img1" width="300" height="100"></div>
    <div class="grid-item"><img src="https://picsum.photos/300" ID="img2" width="300" height="100" display="none"></div>
  </div>
</section>

<h3> Would like each initial image to change to the new source as defined in each .attr. When the new images loads in, it will then link to a new page and not cycle the .fadeOut/.fadeIn query when the user clicks the initial image.</h3>

Answer 1

答案是：

    $(function() { //Open function for 1st (top) image
  $("#img").click(function() { //Click starts image change
    $("#img").fadeOut(200, function() { //Fades out 1st image
      $(this).attr('src', "https://picsum.photos/500").attr("id","img5").fadeIn(200).wrap("<a href='URL GOES HERE'>") //Swap 1st image, ID and adds URL
      $("#img1").fadeOut(200, function() { //Fades out 2nd image
        $(this).attr('src', "https://picsum.photos/600").attr("id","img6").fadeIn(200).wrap("<a href='URL GOES HERE'>") //Swap 2nd image, ID and adds URL
        $("#img2").fadeOut(200, function() { //Fades out 3rd image
          $(this).attr('src', "https://picsum.photos/700").attr("id","img7").fadeIn(200).wrap("<a href='URL GOES HERE'>")//Swap 3rd image, ID and adds URL
          $("#img3").fadeOut(200, function() { //Fade Out 4th image for Brand Support Logo set
            $(this).attr('src', "https://picsum.photos/800").fadeIn(300).click(function() {//Fades in "reset" image, adds click.
              $("#img5").fadeOut(200).attr('src',"https://picsum.photos/100").attr("id","img").fadeIn(300).unwrap();//Fades out new 1st image, resets ID and removes URL
                            $("#img6").fadeOut(200).attr('src',"https://picsum.photos/200").attr("id","img1").fadeIn(300).unwrap();//Fades out new 2nd image, resets ID and removes URL
              $("#img7").fadeOut(200).attr('src',"https://picsum.photos/300").attr("id","img2").fadeIn(300).unwrap();//Fades out new 3rd image, resets ID and removes URL
              }); //Closes "reset"
            }); //Closes img3 fade
          }) //Closes img2 fade 
        }); //Closes img1 fade
      }); //Closes img fade
    }); //Closes click function
}); //Closes function

您添加一个 .wrap 语句，然后使用回调来解包元素。在小提琴中，我解释了每个代码行的用途和作用。