如何将这个jquery代码更改为纯javascript? [英] how do i change this jquery code into pure javascript?

问题描述

前奏:我确定这段代码很丑陋，请随时提出一个更好的方法.

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. (e.g. red belt with a gold buckle vs red belt with a silver buckle, etc.)

您可以在此处看到工作版本: http://solomongiles .com/demos/deadcowbelts/choose-a-belt/trial2.html

you can see a working version here: http://solomongiles.com/demos/deadcowbelts/choose-a-belt/trial2.html

这是我的丑陋jquery.

and here's my ugly 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. :)

乔恩

推荐答案

getElementsByClassName

添加/删除类

添加事件

这篇关于如何将这个jquery代码更改为纯javascript?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！