Question

前奏：我确定这段代码很难看，所以请随意提出更好的方法。

目标：制作一个小型网上商店，让人们在选择时预览他们给定产品（腰带）的不同配置。（例如带金扣的红色腰带，带银扣的红色腰带等）

您可以在此处查看有效版本：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");
     });

 });

谢谢社区！你很棒。：）

乔恩

Answer 1

getElementsByClassName

add/remove class

add events

Answer 2

这是一个没有JQuery的方法，它使用CSS中的级联而不是隐藏和显示每个元素。腰带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>

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

2 个答案: