Question

早上的人们。我有一个交互式图库，用户将鼠标悬停在一种颜色上，图像会变为该颜色。还有另一种选择，他们可以单击一个单独的选项。

我有8个文件夹，每个文件夹里面有21种颜色。我的逻辑是你将鼠标悬停在某种颜色上，然后图像源发生变化，然后单击其中一个选项并更改文件夹。文件夹中的每个图像都具有相同的图像名称。

这是我的尝试：

'   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css">
p   {float:left; padding:6px; background:#CCC; border:1px solid #666; cursor:pointer; margin:0 10px 10px 0; border-radius:6px; }
img {display:block; clear:both; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    imgFldr = 'chrome';

    $('p#white').hover(function(){
        $("#pic").attr("src",imgFldr+"/white.png");
    });
    $('p#blue').hover(function(){
        $("#pic").attr("src",imgFldr+"/blue.png");
    });
    $('p#black').hover(function(){
        $("#pic").attr("src",imgFldr+"/black.png");
    });
    $('p#red').hover(function(){
        $("#pic").attr("src",imgFldr+"/red.png");
    });
    $('p#green').hover(function(){
        $("#pic").attr("src",imgFldr+"/green.png");
    });

    //click the handle buttons
    $('p#chrome').click(function(){
        $("#pic").imgFldr='chrome'.attr("src");
    });
    $('p#black').click(function(){
        $("#pic").imgFldr='black'.attr("src");
    });
    $('p#gold').click(function(){
        $("#pic").imgFldr='gold'.attr("src");
    });

});
</script>
</head>

<body>
colour
<p id="white">white</p>
<p id="blue">blue</p>
<p id="black">black</p>
<p id="red">red</p>
<p id="green">green</p>
<img id="pic" src="chrome/red.png" />
handle
<p id="chrome">chrome</p>
<p id="black">black</p>
<p id="gold">gold</p>
</body>
</html>'

正如您所看到的，将鼠标悬停在颜色按钮上，图像会成功更改，但是在单击其他按钮时，没有任何更改，但我希望更改文件夹，而不是图像名称，这可以通过jQuery使用我的代码？

Answer 1

试试这个

$('p#chrome').click(function(){
    $("#pic").attr("src",'chrome/'+$("#pic").attr("src").split('/')[1]);
});
$('p#black').click(function(){
    $("#pic").attr("src",'black/'+$("#pic").attr("src").split('/')[1]);
});

如果我理解正确......

Answer 2

试试这个：

$('p#chrome').click(function (){
   $('#pic').attr("src",imgFldr+"/chrome.png");
}).mouseover(function (){
   $('#pic').attr("src",imgFldr+"/chrome.png");
});

在悬停时更改图像源和文件夹，然后单击 - jQuery

2 个答案: