我如何将此 jQuery 代码更改为纯 JavaScript？

Question

Prelude: I'm sure this code is ugly so feel free to suggest a better way.前奏：我确定这段代码很丑，所以请随时提出更好的方法。

The goal: making a little web store that lets people preview their different configurations of a given product (a belt) as they make their selections.目标：创建一个小型网上商店，让人们在选择时预览给定产品（腰带）的不同配置。 (eg red belt with a gold buckle vs red belt with a silver buckle, etc.). （例如，带金扣的红带与带银扣的红带等）。

You can see a working version here: http://solomongiles.com/demos/deadcowbelts/choose-a-belt/trial2.html .您可以在此处查看工作版本： http : //solomongiles.com/demos/deadcowbelts/choose-a-belt/trial2.html 。

And here's my ugly jQuery:这是我丑陋的 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");
     });
    
 });

Thank you community!感谢社区！ You're great.你很棒。 :) :)

Jon乔恩

Answer 1

getElementsByClassName getElementsByClassName

add/remove class添加/删除类

add events添加事件

Answer 2

Here's a method without JQuery, that uses the cascading in CSS instead of hiding and showing each element.这是一个没有 JQuery 的方法，它使用 CSS 中的级联而不是隐藏和显示每个元素。 The class name of the belt div is set to control which images are visible.皮带div的类名设置为控制哪些图像是可见的。

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.我将单选按钮的文本放在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>

我如何将此 jQuery 代码更改为纯 JavaScript？

问题描述

2 个解决方案

解决方案1
3 2009-08-09 20:13:59

解决方案2
-1 2009-08-09 20:22:14

我如何将此 jQuery 代码更改为纯 JavaScript？

问题描述

2 个解决方案

解决方案1 3 2009-08-09 20:13:59

解决方案2 -1 2009-08-09 20:22:14

解决方案1
3 2009-08-09 20:13:59

解决方案2
-1 2009-08-09 20:22:14