Question

上午民俗。我心中有一种互动的包裹,即用户对彩色和形象的改变。还有另一种选择是,他们可以点击一个恰当选择。

我有8个手套,其中21个颜色。我的逻辑是,你 h着颜色,图像来源发生变化,然后,你点击了其中的一种选择和倍数的变化。每张画面的图像都有同样的形象。

我在此试图:

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

你可以看到,在彩色纽子上,形象的变化是令人费解的,但在点击其他ton子时,没有什么变化,但我喜欢翻翻翻翻一番,改变形象,不是用我所持有的代码 j子。

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");
});

友情链接