gpt4 book ai didi

javascript - 图片淡入淡出($未定义)

转载 作者:行者123 更新时间:2023-11-28 08:38:59 25 4
gpt4 key购买 nike

这就是页面 http://postimg.org/image/pdzzkmifx/ 上的 Html 的样子。我的代码所做的是根据按下的女巫按钮切换衬衫颜色。按钮是 div(用 css 制作的颜色和形状)。

除了塑造盒子之外,CSS 在这里并不真正相关。

那么我该如何解决 Uncaught ReferenceError: $ is not Defined 错误。

(我试图让旧图片淡出,新选择的图片淡入)(我认为问题出在 JavaScript 中)

HTML

<body>
<div id="wrapper">
<div id="content">
<img id="shirt" src="images/white-t-shirt.png" />
</div>
<div id="choices">
<div id="redBox" class="smallbox" onclick="red()">
Red
</div>
<div id="greenBox" class="smallbox" onclick="green()">
Blue
</div>
<div id="blueBox" class="smallbox" onclick="blue()">
Blue
</div>
<div id="whiteBox" class="smallbox" onclick="white()">
White
</div>
</div>
</div>
</body>

JavaScript

 function red(){color = "red"; change();}
function green(){color = "green"; change();}
function blue(){color = "blue"; change();}
function white(){color = "white"; change();}

function O(obj)
{
if (typeof obj == 'object')
return obj;
else
return document.getElementById(obj)
}


function change()
{
switch (color) {
case "red":
imagePath = 'images/red-t-shirt.png';
break
case "green":
imagePath = 'images/green-t-shirt.png';
break
case "blue":
imagePath = 'images/blue-t-shirt.png';
break
case "white":
imagePath = 'images/white-t-shirt.png';
break
}

O("shirt").src = imagePath;

$(O("#shirt")).fadeOut(700, function () {
$(this).attr('src', imagePath).fadeIn(700);
});
}

最佳答案

我稍微改变了你的代码,现在它似乎可以工作了:

jQuery

var color = '';



$(".smallbox").click(function()
{ var color = $(this).data('val');
switch (color) {
case "red":
imagePath = 'images/red-t-shirt.png';
break
case "green":
imagePath = 'images/green-t-shirt.png';
break
case "blue":
imagePath = 'images/blue-t-shirt.png';
break
case "white":
imagePath = 'images/white-t-shirt.png';
break
}

$("#shirt").src = imagePath;
console.log(imagePath);

$("#shirt").fadeOut(700, function () {
$("#shirt").attr('src', imagePath).fadeIn(700);
});
});

JSFiddle

关于javascript - 图片淡入淡出($未定义),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20725326/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com