comment puis-je changer ce code jquery en javascript pur?

prélude: Je suis sûr que ce code est moche alors n'hésitez pas à suggérer une meilleure façon. Objectif: créer une petite boutique en ligne qui permet aux gens de prévisualiser leurs différentes configurations d'un produit donné (une courroie) au fur et à mesure de leur sélection. (Par exemple ceinture rouge avec une boucle en or vs ceinture rouge avec une boucle d'argent, etc.)comment puis-je changer ce code jquery en javascript pur?

vous pouvez voir une version de travail ici: http://solomongiles.com/demos/deadcowbelts/choose-a-belt/trial2.html

et voici mon jquery laid.

$(document).ready(function(){ 

    $("img").addClass("hide"); 
    $("img.belt-black").removeClass("hide"); 
    $("img.buckle-gold").removeClass("hide"); 
    $("img.coins-gold").removeClass("hide"); 


    $("input.belt-black").click(function(event){ 
     $("img.belt-black").removeClass("hide"); 
     $("img.belt-brown").addClass("hide"); 
     $("img.belt-red").addClass("hide");  
    }); 
    $("input.belt-brown").click(function(event){ 
     $("img.belt-black").addClass("hide"); 
     $("img.belt-brown").removeClass("hide"); 
     $("img.belt-red").addClass("hide");  
    }); 
    $("input.belt-red").click(function(event){ 
     $("img.belt-black").addClass("hide"); 
     $("img.belt-brown").addClass("hide"); 
     $("img.belt-red").removeClass("hide");  
    }); 

    $("input.buckle-gold").click(function(event){ 
     $("img.buckle-gold").removeClass("hide"); 
     $("img.buckle-silver").addClass("hide"); 
    }); 
    $("input.buckle-silver").click(function(event){ 
     $("img.buckle-gold").addClass("hide"); 
     $("img.buckle-silver").removeClass("hide"); 
    }); 

    $("input.coins-gold").click(function(event){ 
     $("img.coins-gold").removeClass("hide"); 
     $("img.coins-silver").addClass("hide"); 
    }); 
    $("input.coins-silver").click(function(event){ 
     $("img.coins-gold").addClass("hide"); 
     $("img.coins-silver").removeClass("hide"); 
    }); 

});

merci communauté! tu es genial. :)

jon

Source

2009-08-09 Anonymous

Exactement pourquoi voulez-vous le réécrire non jQuery javascript? – smack0007

Une sorte de demande étrange. Si vous n'avez pas une bonne connaissance de jquery (vous décrivez votre propre code comme «moche»), le javascript pur est encore plus difficile. Qu'est-ce que vous essayez d'accomplir en abandonnant jquery? –

Eh bien, la chose est: le client pour lequel je conçois ce site possède un mac très vieux et sa version de safari ne fonctionnera pas la démo que j'ai construit. et il semble que le problème pourrait être que cela dépend de jquery. J'espère que si je supprime jquery de l'image, il sera plus compatible avec les navigateurs croisés. :) –

getElementsByClassName

add/remove class

add events

Source

2009-08-09 20:13:59 epascarello

-1

Voici une méthode sans JQuery, qui utilise la cascade en CSS au lieu de se cacher et afficher chaque élément. Le nom de classe de la ceinture div est défini pour contrôler quelles images sont visibles.

J'ai mis le texte pour les boutons radio dans les éléments label et les ai liés aux boutons radio, alors maintenant vous pouvez cliquer sur le texte, pas seulement le bouton radio lui-même.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Custom Belt Prototype</title> 

<script type="text/javascript"> 

var belt = 'black', buckle = 'gold', coins = 'gold'; 

function setClass() { 
    document.getElementById('belt').className = 'belt-'+belt+' buckle-'+ buckle+' coins-'+coins; 
} 

function setBelt(color) { 
    belt = color; 
    setClass(); 
} 

function setBuckle(color) { 
    buckle = color; 
    setClass(); 
} 

function setCoins(color) { 
    coins = color; 
    setClass(); 
} 

</script> 

<style type="text/css"> 

body { margin: 0; padding: 0; } 

#belt { position: relative; top: 10px; margin: 0 auto; width: 652px; } 
#belt-triggers { position: relative; top: 100px; margin: 0 auto; width: 110px; } 

#belt img { position: absolute; display: none; } 
#belt.belt-black .belt-black, 
#belt.belt-brown .belt-brown, 
#belt.belt-red .belt-red, 
#belt.buckle-gold .buckle-gold, 
#belt.buckle-silver .buckle-silver, 
#belt.coins-gold .coins-gold, 
#belt.coins-silver .coins-silver { display: block; } 

</style> 

</head> 
<body> 

<div id="belt" class="belt-black buckle-gold coins-gold"> 

<img class="belt-black" src="faux-belt/belt-black.png" alt="belt-black" width="652" height="75"/> 
<img class="belt-brown" src="faux-belt/belt-brown.png" alt="belt-brown" width="652" height="75"/> 
<img class="belt-red" src="faux-belt/belt-red.png" alt="belt-red" width="652" height="75"/> 

<img class="buckle-gold" src="faux-belt/buckle-gold.png" alt="buckle-gold" width="652" height="75"/> 
<img class="buckle-silver" src="faux-belt/buckle-silver.png" alt="buckle-silver" width="652" height="75"/> 

<img class="coins-gold" src="faux-belt/coins-gold.png" alt="coins-gold" width="652" height="75"/> 
<img class="coins-silver" src="faux-belt/coins-silver.png" alt="coins-silver" width="652" height="75"/> 

</div> 

<div id="belt-triggers"> 

<input class="belt-black" name="belt" id="belt_black" type="radio" checked="checked" onclick="setBelt('black');" /> <label for="belt_black">belt: black</label><br /> 
<input class="belt-brown" name="belt" id="belt_brown" type="radio" onclick="setBelt('brown');" /> <label for="belt_brown">belt: brown</label><br /> 
<input class="belt-red" name="belt" id="belt_red" type="radio" onclick="setBelt('red');" /> <label for="belt_red">belt: red</label><br /><br /> 

<input class="buckle-gold" name="buckle" id="buckle_gold" type="radio" checked="checked" onclick="setBuckle('gold');" /> <label for="buckle_gold">buckle: gold</label><br /> 
<input class="buckle-silver" name="buckle" id="buckle_silver" type="radio" onclick="setBuckle('silver');" /> <label for="buckle_silver">buckle: silver</label><br /><br /> 

<input class="coins-gold" name="coins" id="coins_gold" type="radio" checked="checked" onclick="setCoins('gold');" /> <label for="coins_gold">coins: gold</label><br /> 
<input class="coins-silver" name="coins" id="coins_silver" type="radio" onclick="setCoins('silver');" /> <label for="coins_silver">coins: silver</label> 

</div> 

</body> 
</html>

Source

2009-08-09 20:22:14 Guffa

merci !! tu es genial! –

Pourquoi le downvote (qui que ce soit)? Si vous ne dites pas ce que vous n'aimez pas, c'est plutôt inutile ... – Guffa

merde. cela ne fonctionne pas dans IE6. –

comment puis-je changer ce code jquery en javascript pur?

Répondre

Questions connexes