Fatal编程技术网
  • javascript/
  • 如何将jQuery代码更改为纯JavaScript？

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

javascript jquery

如何将jQuery代码更改为纯JavaScript？,javascript,jquery,Javascript,Jquery,前奏曲：我确信这段代码很难看，所以请随意建议一个更好的方法 目标是：制作一个小型网络商店，让人们在做出选择时预览给定产品（皮带）的不同配置。（例如，带金扣的红色腰带与带银扣的红色腰带等） 您可以在此处看到工作版本： 下面是我丑陋的jQuery： $(document).ready(function(){ $("img").addClass("hide"); $("img.belt-black").removeC

前奏曲：我确信这段代码很难看，所以请随意建议一个更好的方法

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

您可以在此处看到工作版本：

下面是我丑陋的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");
     });
    
 });
谢谢社区！你太棒了。：）

乔恩

这里有一个没有JQuery的方法，它使用CSS中的级联，而不是隐藏和显示每个元素。皮带
div
的类名设置为控制哪些图像可见

我将单选按钮的文本放在
标签
元素中，并将它们链接到单选按钮，因此现在您还可以单击文本，而不仅仅是单选按钮本身

<!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>


定制皮带原型
var腰带='黑色'，皮带扣='黄金'，硬币='黄金'；
函数setClass（）{
document.getElementById（'belt'）。className='belt-'+belt+'buckle-'+buckle+'coins-'+coins；
}
功能设置（颜色）{
皮带=颜色；
setClass（）；
}
功能设置块（颜色）{
扣=颜色；
setClass（）；
}
功能设置（彩色）{
硬币=颜色；
setClass（）；
}
正文{margin:0；padding:0；}
#皮带{位置：相对；顶部：10px；边距：0自动；宽度：652px；}
#皮带触发器{位置：相对；顶部：100px；边距：0自动；宽度：110px；}
#皮带img{位置：绝对；显示：无；}
#腰带，黑色腰带，黑色腰带，
#皮带，皮带棕色，皮带棕色，
#皮带，皮带红，皮带红，
#皮带扣，金扣，金扣，
#皮带扣银色皮带扣银色，
#腰带，金币，金币，
#腰带。银币。银币{显示：块；}
皮带：黑色

皮带：棕色

皮带：红色


扣：金色

皮带扣：银色


硬币：黄金

硬币：银币
您到底为什么要将其重写为非jQuery javascript？有点奇怪的请求。如果您还没有完全掌握jquery（您将自己的代码描述为“丑陋”），那么纯javascript就更难了。你想通过抛弃jquery来实现什么？好吧，问题是：我为其设计这个网站的客户拥有一台非常旧的mac，他的safari版本不会运行我构建的演示。问题似乎在于它依赖于jquery。我希望，如果我从图片中删除jquery，那么它将更加跨浏览器友好。：）一般来说，去掉jquery会使代码的跨浏览器友好性降低。什么版本的safari？为什么投反对票（不管是谁）？如果你不说你不喜欢什么，那是毫无意义的…这很奇怪。。。你说的“不起作用”具体是什么意思？会发生什么？