このjqueryコードを純粋なjavascriptに変更するにはどうすればよいですか？

prelude：私はこのコードが醜いと確信していますので、より良い方法を提案してください。このjqueryコードを純粋なjavascriptに変更するにはどうすればよいですか？

目標：特定の製品（ベルト）のさまざまな構成をプレビューする小さなウェブストアを作成します。 http://solomongiles.com/demos/deadcowbelts/choose-a-belt/trial2.html

とここに私の醜いjQueryの：

あなたはここで働いバージョンを見ることができる（例えば、金と赤のベルトなど、銀のバックルと赤のベルトバックル対）。

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

});

ありがとうコミュニティ！あなたは素晴らしい。 :)

JON

出典

2009-08-09 Anonymous

なぜjQuery以外のJavaScriptを書き直したいのですか？ – smack0007

一種の奇妙な要求。あなたがjquery（あなた自身のコードを '醜い'と記述している）をしっかり把握していないなら、純粋なjavascriptはさらに難しいです。あなたはjqueryを捨てて何を達成しようとしていますか？ –

まあ、事は：私はこのサイトを設計しているクライアントは本当に古いmacを所有し、彼のバージョンのSafariは私が構築したデモを実行しません。問題はjqueryに依存しているように思えます。私は画像からjqueryを削除すると、より多くのクロスブラウザになることを望んでいます。 :) –

getElementsByClassName

add/remove class

add events

出典

2009-08-09 20:13:59 epascarello

-1

ここでは代わりに隠れてのCSSでのカスケードを使用し、各要素を示すjQueryのない方法は、です。ベルトのクラス名divは、表示する画像を制御するように設定されています。

ラジオボタンのテキストをlabel要素に置き、ラジオボタンにリンクしたので、ラジオボタン自体だけでなく、テキストもクリックできるようになりました。

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

出典

2009-08-09 20:22:14 Guffa

ありがとうございます！あなたは素晴らしい！ –

なぜdownvote（誰でも）だった？あなたが好きでないことが何であるかを言わないなら、それはむしろ意味がありません。 – Guffa

ごまかす。 IE6では動作しません。 –

このjqueryコードを純粋なjavascriptに変更するにはどうすればよいですか？

答えて

関連する問題