Блог

Главная - Вопросы по программированию - Динамическое изменение ссылки на изображение с помощью J-запроса

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

#jquery #html

#jquery #HTML

Вопрос:

В приведенном ниже коде я пытаюсь изменить изображения динамическим способом. это работает нормально, однако я хотел бы изменить ссылку, которая подключается к каждому динамическому изображению, но я не совсем уверен, как заставить это работать

 $(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

Комментарии:

1. Я бы предположил, что проще иметь 5 отдельных ссылок / изображений и показывать / скрывать по мере необходимости (вместо изменения одной ссылки / изображения)

2. Как предполагает freefaller, возможно, стоит загрузить изображения и просто переключить их видимость (при условии, что изображений не так много) Помимо того, что это проще и возможно без использования JS вообще (только CSS), это позволяет браузеру загружать изображения, готовые к отображению. Таким образом, при загрузке каждого нового изображения не будет никаких пробелов.

Ответ №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>

Ответ №2:

Логика изменения href ссылки аналогична той, которая у вас уже есть, которая изменяет src значение img , как вы можете видеть в примере ниже. Однако следует отметить одну вещь — использование prop() over 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>

Ответ №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');
Метки: