ansaurus

Question

how do i change this jquery code into pure javascript?

Answer 1

+2 A:

getElementsByClassName

add/remove class

add events

epascarello 2009-08-09 20:13:59

Answer 2

A:

Here's a method without JQuery, that uses the cascading in CSS instead of hiding and showing each element. The class name of the belt div is set to control which images are visible.

I put the text for the radio buttons in label elements and linked them to the radio buttons, so now you can click on the text also, not only the radio button itself.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<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>

Guffa 2009-08-09 20:22:14

thanks!! you're great!

2009-08-09 20:52:25

Why the downvote (whoever that was)? If you don't say what it is that you don't like, it's rather pointless...

Guffa 2009-08-09 21:19:40

crap. it doesn't work in IE6.

2009-08-09 21:52:08

That's odd... What specifically do you mean by "doesn't work"? What happens?

Guffa 2009-08-10 01:41:35

ansaurus

tags:

views:

answers:

how do i change this jquery code into pure javascript?

related questions