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>

请给我一些帮助。例如，当图像为$('#imageLink3')时，如何将link2.com上的链接更改为href img2.jpg

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>

Answer 2

更改链接RedirectMatch permanent "^/(?!exception/)(.*)" "https://service.example.com/$1"的逻辑类似于您已经拥有的更改href的{{1}}的逻辑，如下面的示例所示。需要注意的一件事是，尽管在src上使用了img。

我建议的主要更改是创建一个对象数组，您可以用两个属性填充这些属性，一个属性用于prop()，另一个属性用于attr()。然后，您可以在调用超时时简单地遍历它们。试试这个：

href

src

$(function() {
  var dataArray = [{
    img: "img1.jpg",
    url: 'link1.com'
  },{
    img: "img2.jpg",
    url: 'link2.com'
  },{
    img: "img3.jpg",
    url: 'link3.com'
  },{
    img: "img4.jpg",
    url: 'link4.com'
  },{
    img: "img5.jpg",
    url: 'link5.com'
  }]
  
  var thisId = 0;
  updateImageAndLink();
  window.setInterval(updateImageAndLink, 3000);

  function updateImageAndLink() {
    var obj = dataArray[thisId % dataArray.length];
    $('#charityimgSizer').prop('src', obj.img);
    $('#imageLink3').prop('href', obj.url);
    thisId++;  
  }
});

Answer 3

为什么在迭代和构造所有内容时不仅使用您的ID。

例如

var thisId = 0;

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

由于每个选择器都只是一个普通字符串，因此您可以像其他字符串一样操作/连接它

如果您以后不需要再依赖来自外部源的图像并加载到{{1 }}

例如

dataArray

使用J查询动态更改图像的链接

3 个答案: