2
votes

Modification dynamique du lien vers l'image à l'aide de JQuery

Dans le code ci-dessous, j'essaye de changer les images de manière dynamique. cela fonctionne bien mais j'aimerais également changer le lien qui se connecte à chaque image dynamique mais je ne sais pas trop comment faire fonctionner cela

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

  var thisId = 0;

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

J'aimerais avoir de l'aide ci-dessus, s'il vous plaît. Par exemple, comment puis-je changer le lien sur $ ('# imageLink3') en href link2.com quand son image est img2.jpg

jquery html

2 commentaires

Je suggérerais qu'il est plus facile d'avoir 5 liens / images distincts et d'afficher / masquer le cas échéant (plutôt que de changer un seul lien / image)

Comme le suggère freefaller, cela peut valoir la peine de charger les images et de simplement cycler leur visibilité (en supposant qu'il n'y ait pas un grand nombre d'images) En plus d'être plus simple et possible sans JS du tout (juste CSS), cela permet au navigateur de se charger les images prêtes à être affichées. Il n'y aura donc pas de flash d'espace blanc lors du chargement de chaque nouvelle image.

3 Réponses :

1
votes

Recherchez la balise a (comme vous l'avez fait pour img ) et utilisez .attr ('href', '...') code> pour définir l'URL du lien.

 

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

  Par exemple 
  
 

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

  var thisId = 0;

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

0 commentaires

1
votes

La logique pour changer le href du lien est similaire à celle que vous avez déjà qui change le src de l ' img , comme vous peut voir dans l'exemple ci-dessous. Une chose à noter est l'utilisation de prop () sur attr () , cependant.

Le principal changement que je suggérerais serait de créer un tableau d'objets que vous pouvez remplir avec deux propriétés, une pour le href et une pour le src . Ensuite, vous pouvez simplement les parcourir en boucle lorsque le délai d'attente est appelé. Essayez ceci:

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

#charityimgSizer {
  width: 300px;
}

$(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++;  
  }
});

0 commentaires

0
votes

Pourquoi ne pas utiliser uniquement votre identifiant lors de l'itération et de la construction de tout à la volée.

Par exemple

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

Comme chaque sélecteur n'est qu'une simple chaîne, vous pouvez manipuler / concattez-le juste d'autres chaînes

Je suggérerais même de donner à l'image une URL de chaîne source aux ressources directement et de ne changer l'identifiant que vous-même, si vous n'avez pas besoin de vous fier aux images provenant d'un externe source plus tard et en cours de chargement dans dataArray

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

0 commentaires