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

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