Un script javascript simple a mal tourné!

Question

J'essaye de mettre en place un script simple pour basculer un lien d'une case à cocher.

Le script que j'ai ci-dessous fonctionne, mais il ne modifie que le href de la première instance.

Je suis sûr qu'il y a probablement une façon beaucoup plus simple de faire cela, car j'ai beaucoup de code redondant.

Quelqu'un peut-il aider à faire la lumière sur ce sujet pour moi?

Merci! Nick

<script type="text/javascript"> 
function toggleLinks() { 
    //instant attraction 
    if (document.getElementById('add_to_cart').href == "http://bradp.com/dlg/sell.php?prodData=cb%2C1") document.getElementById('add_to_cart').href = "http://bradp.com/dlg/sell.php?prodData=cb%2C15"; 
    else if (document.getElementById('add_to_cart').href == "http://bradp.com/dlg/sell.php?prodData=cb%2C15") document.getElementById('add_to_cart').href = "http://bradp.com/dlg/sell.php?prodData=cb%2C1"; 

    //fashion bible 
    if (document.getElementById('add_to_cart').href == "http://bradp.com/dlg/sell.php?prodData=cb%2C4") document.getElementById('add_to_cart').href = "http://bradp.com/dlg/sell.php?prodData=cb%2C16"; 
    else if (document.getElementById('add_to_cart').href == "http://bradp.com/dlg/sell.php?prodData=cb%2C16") document.getElementById('add_to_cart').href = "http://bradp.com/dlg/sell.php?prodData=cb%2C4";  

    //underground dating seminar 
    if (document.getElementById('add_to_cart').href == "http://bradp.com/dlg/sell.php?prodData=cb%2C5") document.getElementById('add_to_cart').href = "http://bradp.com/dlg/sell.php?prodData=cb%2C17"; 
    else if (document.getElementById('add_to_cart').href == "http://bradp.com/dlg/sell.php?prodData=cb%2C17") document.getElementById('add_to_cart').href = "http://bradp.com/dlg/sell.php?prodData=cb%2C5";  

    //planning the perfect date 
    if (document.getElementById('add_to_cart').href == "http://bradp.com/dlg/sell.php?prodData=cb%2C6") document.getElementById('add_to_cart').href = "http://bradp.com/dlg/sell.php?prodData=cb%2C18"; 
    else if (document.getElementById('add_to_cart').href == "http://bradp.com/dlg/sell.php?prodData=cb%2C18") document.getElementById('add_to_cart').href = "http://bradp.com/dlg/sell.php?prodData=cb%2C6";  

    //how to beat approach anxiety 
    if (document.getElementById('add_to_cart').href == "http://bradp.com/dlg/sell.php?prodData=cb%2C7") document.getElementById('add_to_cart').href = "http://bradp.com/dlg/sell.php?prodData=cb%2C19"; 
    else if (document.getElementById('add_to_cart').href == "http://bradp.com/dlg/sell.php?prodData=cb%2C19") document.getElementById('add_to_cart').href = "http://bradp.com/dlg/sell.php?prodData=cb%2C7";  

    //interviews with naturals 
    if (document.getElementById('add_to_cart').href == "http://bradp.com/dlg/sell.php?prodData=cb%2C8") document.getElementById('add_to_cart').href = "http://bradp.com/dlg/sell.php?prodData=cb%2C20"; 
    else if (document.getElementById('add_to_cart').href == "http://bradp.com/dlg/sell.php?prodData=cb%2C20") document.getElementById('add_to_cart').href = "http://bradp.com/dlg/sell.php?prodData=cb%2C8";  

    //crocodile style 
    if (document.getElementById('add_to_cart').href == "http://bradp.com/dlg/sell.php?prodData=cb%2C9") document.getElementById('add_to_cart').href = "http://bradp.com/dlg/sell.php?prodData=cb%2C21"; 
    else if (document.getElementById('add_to_cart').href == "http://bradp.com/dlg/sell.php?prodData=cb%2C21") document.getElementById('add_to_cart').href = "http://bradp.com/dlg/sell.php?prodData=cb%2C9";  

    //pheromone kids 10 minute seduction 
    if (document.getElementById('add_to_cart').href == "http://bradp.com/dlg/sell.php?prodData=cb%2C10") document.getElementById('add_to_cart').href = "http://bradp.com/dlg/sell.php?prodData=cb%2C22";  
    else if (document.getElementById('add_to_cart').href == "http://bradp.com/dlg/sell.php?prodData=cb%2C22") document.getElementById('add_to_cart').href = "http://bradp.com/dlg/sell.php?prodData=cb%2C10"; 

    //joe natural uncensored 
    if (document.getElementById('add_to_cart').href == "http://bradp.com/dlg/sell.php?prodData=cb%2C11") document.getElementById('add_to_cart').href = "http://bradp.com/dlg/sell.php?prodData=cb%2C23";  
    else if (document.getElementById('add_to_cart').href == "http://bradp.com/dlg/sell.php?prodData=cb%2C23") document.getElementById('add_to_cart').href = "http://bradp.com/dlg/sell.php?prodData=cb%2C11"; 

    //buzzy: master of threesomes 
    if (document.getElementById('add_to_cart').href == "http://bradp.com/dlg/sell.php?prodData=cb%2C12") document.getElementById('add_to_cart').href = "http://bradp.com/dlg/sell.php?prodData=cb%2C24";  
    else if (document.getElementById('add_to_cart').href == "http://bradp.com/dlg/sell.php?prodData=cb%2C24") document.getElementById('add_to_cart').href = "http://bradp.com/dlg/sell.php?prodData=cb%2C12"; 

} 
</script> 

Answer 1

En HTML, l'attribut ID est unique. Il ne devrait y avoir qu'un élément sur une page donnée avec le même ID.

En tant que tel, document.getElementById s'attend seulement à trouver un élément et n'en renvoie qu'un. Vous aurez besoin d'une configuration beaucoup plus sophistiquée pour attraper tous les liens, ce qui devrait vraiment partager une classe, pas un ID. Le type de comportement que vous recherchez - obtenir des collections d'éléments et les utiliser de cette façon - est réalisable à travers quelque chose comme jQuery, car il va automatiquement parcourir les éléments pour vous. Sinon, vous effectuerez vous-même les boucles une fois que vous aurez réussi à sélectionner tous les éléments que vous voulez.

Answer 2

Essayez de respecter les normes du W3C et ne pas utiliser le même identifiant pour plus d'un élément.

Si vous avez vraiment faire de cette façon, jetez un oeil getElementsByTagName

Answer 3

Vous ne devez pas utiliser le même identifiant pour plus d'un élément. Utilisez une classe à la place. Une fois que vous faites cela, vous pouvez utiliser jQuery pour faire quelque chose comme ceci:

jQuery(".myClass").each(function() { 
    this.href='...'; 
});