Question

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

除了塑造盒子之外，Css在这里并不重要。

那么我如何解决未捕获的ReferenceError：$未定义错误。

（我试图让旧图片淡出，新选择的图片淡入）（我认为问题出在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);
            });
    }

Answer 1

我稍微更改了你的代码，现在似乎正在运行：

<强>的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

图片淡入和淡出（$未定义）

1 个答案: