Как я могу изменить этот код JQuery в чистый JavaScript? - PullRequest
Новая
       0

Как я могу изменить этот код JQuery в чистый JavaScript?

0 голосов
/ 09 августа 2009

прелюдия: я уверен, что этот код некрасив, поэтому не стесняйтесь предлагать лучший способ.

цель: создать небольшой интернет-магазин, который позволит людям предварительно просматривать различные конфигурации данного продукта (ремня) при выборе. (например, красный ремень с золотой пряжкой против красного пояса с серебряной пряжкой и т. д.)

рабочую версию вы можете увидеть здесь: http://solomongiles.com/demos/deadcowbelts/choose-a-belt/trial2.html

и вот мой ужасный вопрос. 

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

 });

спасибо, сообщество! Ты замечательный. :)

джон

Ответы [ 2 ]

3 голосов
/ 10 августа 2009
0 голосов
/ 10 августа 2009

Вот метод без 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...