Динамическое изменение ссылки на изображение с помощью J Query

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') на href link2.com, если это изображение img2.jpg

Answer 1

Логика для изменения href ссылки аналогична той, которая у вас уже есть, которая меняет 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++;  
  }
});

#charityimgSizer {
  width: 300px;
}

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

Answer 2

Найдите тег 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 3

Почему бы не использовать свой идентификатор только для итерации и создания всего на лету.

Например

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

Так как каждый селектор является простой строкой, вы можете манипулировать / согласовывать его только с другими строками

Я бы даже предложил предоставить изображение исходной строки URL-адреса непосредственно ресурсам и изменить сам идентификатор, только если вам не нужно полагаться на изображения, поступающие позже из внешнего источника и загружаемые в dataArray

, например

$('#charityimgSizer').attr('src', 'path/to/img' + thisId + '.jpg');