jquery - 使用 JQuery 动态更改图像链接

Question

在下面的代码中，我尝试以动态方式更改图像。效果很好，但是我也想更改连接到每个图像动态的链接，但我不太确定如何让它工作

$(function() {
  var dataArray = new Array();
  dataArray[0] = "img1.jpg";
  dataArray[1] = "img2.jpg";
  dataArray[2] = "img3.jpg";
  dataArray[3] = "img4.jpg";
  dataArray[4] = "img5.jpg";

  var thisId = 0;

  window.setInterval(function() {
    $('#charityimgSizer').attr('src', dataArray[thisId]);
    thisId++;
    if (thisId == 5) thisId = 0;
  }, 3000);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="imageLink3" href="www.link4.com">
  <img id="charityimgSizer" src="img4.jpg" style="width: 300px" class="rewardImgSize alignright notopmargin pulse animated" alt="hexagon" title="hexagon" data-animate="pulse">
</a>

我需要以上方面的帮助。例如，当图像为 img2.jpg 时，如何将 $('#imageLink3') 上的链接更改为 href link2.com

Answer 1

找到 a 标记(就像您对 img 所做的那样)并使用 .attr('href', '...') 设置链接 url。

$(function() {
  var dataArray = new Array();
  dataArray[0] = "img1.jpg";
  dataArray[1] = "img2.jpg";
  dataArray[2] = "img3.jpg";
  dataArray[3] = "img4.jpg";
  dataArray[4] = "img5.jpg";

  var thisId = 0;

  window.setInterval(function() {
    // add this
    $('#imageLink3').attr('href', grabLinkFromSomewhere());
    $('#charityimgSizer').attr('src', dataArray[thisId]);
    thisId++;
    if (thisId == 5) thisId = 0;
  }, 3000);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="imageLink3" href="www.link4.com">
  <img id="charityimgSizer" src="img4.jpg" style="width: 300px" class="rewardImgSize alignright notopmargin pulse animated" alt="hexagon" title="hexagon" data-animate="pulse">
</a>

例如

$(function() {
  var dataArray = new Array();
  dataArray[0] = "img1.jpg";
  dataArray[1] = "img2.jpg";
  dataArray[2] = "img3.jpg";
  dataArray[3] = "img4.jpg";
  dataArray[4] = "img5.jpg";
  
  const links = [
    'https://stackoverflow.com?id=1',
    'https://stackoverflow.com?id=2',
    'https://stackoverflow.com?id=3',
    'https://stackoverflow.com?id=4',
    'https://stackoverflow.com?id=5',
  ];

  var thisId = 0;

  window.setInterval(function() {
    // add this
    $('#imageLink3').attr('href', links[thisId]);
    $('#charityimgSizer').attr('src', dataArray[thisId]);
    thisId++;
    if (thisId == 5) thisId = 0;
  }, 3000);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="imageLink3" href="www.link4.com">
  <img id="charityimgSizer" src="img4.jpg" style="width: 300px" class="rewardImgSize alignright notopmargin pulse animated" alt="hexagon" title="hexagon" data-animate="pulse">
</a>