iT邦幫忙

0

個位大師好,小弟剛學不久有事要請教

個位大師好,小弟剛學不久有事要請教

想做類似換裝的網頁但一直卡住....

換了衣服顏色後,想換衣服上的款式(例如襯衫要換T桖)

如選了款式,想往上回在重選顏色就卡住了 Orz

能請大師們協助嗎??

div id="BOX"

div id="SMALL"
img src="img/huge1.jpg" width="120" height="142" id="SS1"
img src="img/huge2.jpg" width="120" height="142" id="SS2"
img src="img/huge3.jpg" width="120" height="142" id="SS3"
img src="img/huge4.jpg" width="120" height="142" id="SS4"
/div
div id="SMALL1"
img src="img/style1.jpg" width="120" height="142" id="SS1"
img src="img/style2.jpg" width="120" height="142" id="SS2"
img src="img/style3.jpg" width="120" height="142" id="SS3"
/div
img src="img/huge1.jpg" width="507" height="600" id="BIG"
/div

$(function(){

$("#SMALL img").click(function(){
	
	var N = $(this).attr("id").substr(2);
	
	$("#BIG").attr( "src" , "img/suit" + N + ".jpg" );	
	
});

});

$(function(){

$("#SMALL1 img").click(function(){
	
	var N = $(this).attr("id").substr(2);
	
	$("#BIG").attr( "src" , "img/huge1/shirt" + N + ".jpg" );	
	
});

});

沒事 剛剛畫面跳成像是廣告的頁面,以為是假詢問真廣告 不好意思 修改一下
0
shijung
iT邦新手 5 級 ‧ 2018-08-23 13:43:12
最佳解答

存起來或者是用checkbox帶你的圖片的樣式會比較好用
像這樣:https://stackoverflow.com/questions/30663562/use-images-like-checkboxes/30663705
$(function(){});寫一個把一開始要執行的都放進去就好
試試看 這是不是你要的做法

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>   
$(function(){

     $("#SMALL img").click(function(){    //選了襯衫或衣服 suit or huge         
        $("#choose1").val($(this).attr("id"));       
        changeStyles();
    });


    $("#SMALL1 img").click(function(){ //選了紅色或藍色                
        $("#choose2").val($(this).attr("id"));
        if($(this).attr("id").indexOf("default")>-1){
            $("#choose2").val("");
            //$("#choose3").val("");//看是不是一定要選第二個才有第三層路徑圖片
        }
        changeStyles();
    });

     $("#SMALL2 img").click(function(){ //選了紅色或藍色                   
        $("#choose3").val($(this).attr("id"));
        if($(this).attr("id").indexOf("default")>-1){
            $("#choose3").val("");
        }
        changeStyles();
    });
    function changeStyles()
    {      
        var url = "";  
       if($("#choose3").val()!=""){
           url = "/"+$("#choose3").val()+url;
       }
       if($("#choose2").val()!=""){
        url = "/"+$("#choose2").val()+url;
       }
       if($("#choose1").val()!=""){
        url = "img/"+$("#choose1").val()+url;
        $("#BIG").val(url+".jpg");
       }else{
           alert('沒有衣服款式!')
       }
       
       
    }
    
});


</script>
</head>
<body>
    <div id="BOX">

    <div id="SMALL">
        <img src="img/huge1.jpg" width="120" height="142" id="hude"/>
        <img src="img/huge2.jpg" width="120" height="142" id="suit"/>
   
    </div>
    <div id="SMALL1">
        <img src="img/style1.jpg" width="120" height="142" id="red-bg"/>
        <img src="img/style2.jpg" width="120" height="142" id="blue-bg"/>
        <img src="img/no.jpg" width="120" height="142" id="default-bg"/><!--取消選取-->
  
</div>
<div id="SMALL2">
        <img src="img/point1.jpg" width="120" height="142" id="white-point"/>
        <img src="img/point2.jpg" width="120" height="142" id="red-point"/>
        <img src="img/no.jpg" width="120" height="142" id="default-point"/>
</div>
<input type="hidden" id="choose1" ><!--衣服款式 hidden改成text就可以看到 <input type="text" id="choose1" >-->
<input type="hidden" id="choose2"><!--衣服顏色-->
<input type="hidden" id="choose3"><!--白點 紅點-->

</div>
<div>

<!--<img id="BIG" />-->
<input id="BIG" type="text"/>
</div>

</body>
</html>

看更多先前的回應...收起先前的回應...

需要的應該是圖片的疊加吧
/images/emoticon/emoticon10.gif

shijung iT邦新手 5 級 ‧ 2018-08-23 14:31:09 檢舉

不是不知道要怎麼去記憶嗎?看是圖片疊加還是有result的圖片@@

疊加就這樣

<!DOCTYPE html>
<html>
<head>
    <style>
        .abposit{
            position: absolute;            
        }
    </style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>   
$(function(){

    $("#SMALL img").click(function(){    //選了襯衫或衣服 suit or huge       
    
        $("#choose1").val($(this).attr("id"));
       
        changeStyles();
    });


    $("#SMALL1 img").click(function(){ //選了紅色或藍色
                
        $("#choose2").val($(this).attr("id"));
        if($(this).attr("id").indexOf("default")>-1){
            $("#choose2").val("");
            $("#choose3").val("");//看是不是一定要選第二個才有第三層路徑圖片
        }
        changeStyles();
    });

     $("#SMALL2 img").click(function(){ //選了紅色或藍色                   
        $("#choose3").val($(this).attr("id"));
        if($(this).attr("id").indexOf("default")>-1){
            $("#choose3").val("");
        }
        changeStyles();
    });
    function changeStyles()
    {     
        $("#BIG").html("");
        var url = "";  
       if($("#choose3").val()!=""){
          // url = "/"+$("#choose3").val()+url;
          $("#BIG").append("<img class='abposit' src='img/"+$("#choose3").val()+".png'/>");
        
       }
       if($("#choose2").val()!=""){
       // url = "/"+$("#choose2").val()+url;
        $("#BIG").append("<img class='abposit' src='img/"+$("#choose2").val()+".png'/>");
        
       }
       if($("#choose1").val()!=""){
        url = "img/"+$("#choose1").val()+url;
        $("#BIG").append("<img class='abposit' src='img/"+$("#choose1").val()+".png'/>");        
        //$("#BIG").val(url+".jpg");
       }else{
           alert('沒有衣服款式!')
       }
       
       
    }
    
});


</script>
</head>
<body>
    <div id="BOX">

    <div id="SMALL">
        <img src="img/huge1.jpg" width="120" height="142" id="hude"/>
        <img src="img/huge2.jpg" width="120" height="142" id="suit"/>
   
    </div>
    <div id="SMALL1">
        <img src="img/style1.jpg" width="120" height="142" id="red-bg"/>
        <img src="img/style2.jpg" width="120" height="142" id="blue-bg"/>
        <img src="img/no.jpg" width="120" height="142" id="default-bg"/><!--取消選取-->
  
</div>
<div id="SMALL2">
        <img src="img/point1.jpg" width="120" height="142" id="white-point"/>
        <img src="img/point2.jpg" width="120" height="142" id="red-point"/>
        <img src="img/no.jpg" width="120" height="142" id="default-point"/>
</div>
<input type="hidden" id="choose1" ><!--衣服款式 hidden改成text就可以看到 <input type="text" id="choose1" >-->
<input type="hidden" id="choose2"><!--衣服顏色-->
<input type="hidden" id="choose3"><!--白點 紅點-->

</div>
<div>

<!--<img id="BIG" />-->
<!--<input id="BIG" type="text"/>-->

<div id="BIG"></div>
</div >

</body>
</html>

這樣沒辦法疊加吧,只是把兩張圖放一起,疊加是兩張圖重疊…像這樣…https://ithelp.ithome.com.tw/upload/images/20180823/20108694E3YhDNexA7.png

mack88888 iT邦新手 5 級 ‧ 2018-08-23 17:33:41 檢舉

謝謝大師的說明 ^^

0
froce
iT邦高手 1 級 ‧ 2018-08-22 20:29:16
mack88888 iT邦新手 5 級 ‧ 2018-08-23 11:25:19 檢舉

謝謝您的回答,很接近,但><還不是。

簡單說, 有二種按鈕 ,

一個是顏色 ( 紅色 ) ( 藍色 )
一個是形狀 ( 正方 ) ( 圓型 )

預設是 「 紅色 正方 」

點擊了 ( 藍色 ) → 「 藍色 正方 」

在點擊 ( 圓型 ) → 「 藍色 圓型 」

在點擊 ( 紅色 ) → 「 紅色 圓型 」

大概是這樣


但我想做的更進階

有 四種按鈕,

一個是衣服樣式 『 圓T 」 『 帽 T 』 『 襯衫 』

一個是顏色 「 紅 」「藍」 「白」

一個是圖樣 「斜紋」 「直條」 「格子」

一個是 「口袋」「無口袋」 「二邊口袋」

預設是= 『 圓T 紅色 斜紋 口袋 』

在點擊其它的顏色或樣式可以隨這變化這樣。

0

這樣?

<html>
<head>
    <title>pick test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <!-- CSS -->
    <style type="text/css">
        img{
            cursor: pointer;
        }
        #small img, #small1 img{
            width:100px;
        }
        #big{
            position: relative;
        }
        #big {

        }
        #big img{
            width:200px;
            border: 1px solid black;
        }
        .box-style{
            position:absolute;
            top:0;
            left:0;
        }
        .box-style img{
            width:50px;
        }
    </style>

    <!-- Javascript -->
    <script language="javascript">
        $(function () {
            $('#small div').click(function(){
                var smallImg = $(this).clone();
                smallImg.addClass('box-style');
                smallImg.children().width(50);
                $('#big').append(smallImg);
            });

            $('#small1 div').click(function(){
                var smallImg = $(this).clone();
                smallImg.addClass('box-style');
                smallImg.children().width(50);
                $('#big').append(smallImg);
            });
        });
    </script>
</head>
<body>
    顏色
    <div id="small">
        <div>
            <img src="https://goo.gl/WhkSTw" alt="" />
        </div>
        <div>
            <img src="https://goo.gl/VMJKCm" alt="" />
        </div>
    </div>
    樣式
    <div id="small1">
        <div>
            <img src="https://goo.gl/qM3gKA" alt="" />
        </div>
        <div>
            <img src="https://goo.gl/xKd1TR" alt="" />
        </div>
    </div>
    <div id="big">
        <div>
            <img src="https://goo.gl/UoDz3G" alt="">
        </div>
    </div>
</body>
</html>
看更多先前的回應...收起先前的回應...
mack88888 iT邦新手 5 級 ‧ 2018-08-23 11:26:00 檢舉

謝謝您的回答,很接近,但><還不是。

簡單說, 有二種按鈕 ,

一個是顏色 ( 紅色 ) ( 藍色 )
一個是形狀 ( 正方 ) ( 圓型 )

預設是 「 紅色 正方 」

點擊了 ( 藍色 ) → 「 藍色 正方 」

在點擊 ( 圓型 ) → 「 藍色 圓型 」

在點擊 ( 紅色 ) → 「 紅色 圓型 」

大概是這樣


但我想做的更進階

有 四種按鈕,

一個是衣服樣式 『 圓T 」 『 帽 T 』 『 襯衫 』

一個是顏色 「 紅 」「藍」 「白」

一個是圖樣 「斜紋」 「直條」 「格子」

一個是 「口袋」「無口袋」 「二邊口袋」

預設是= 『 圓T 紅色 斜紋 口袋 』

在點擊其它的顏色或樣式可以隨這變化這樣。

意思是要做出組合的效果?問題是能組合,就只有樣式而已,圖片要組合,要用不同div吧,而且你這不是問題,而是需求了~

mack88888 iT邦新手 5 級 ‧ 2018-08-23 11:35:50 檢舉

是的要不同的div 沒錯,但我不知道要怎麼記憶上次點擊的是什麼

例如說

預設是『 圓T 紅色 斜紋 口袋』

我點擊了『 藍色 』 因該就要變成『圓T 藍色 斜紋 口袋』

哪我在點擊『 帽T 』 因該就要變成 『帽T 藍色 斜紋 口袋』

在點擊『無口袋』 因該就要變成 『帽T 藍色 斜紋 無口袋』

我不知道要怎麼去記憶才對 ORZ

不止是記憶的問題,連組合你都還沒寫出來,範例改了,只能點到為止,剩下要你自己完成了,沒問題記得結案~

youarefat iT邦新手 5 級 ‧ 2018-09-07 15:32:19 檢舉

'應'該啦

0
Luke
iT邦新手 4 級 ‧ 2018-08-23 11:58:35

為什麼要記?/images/emoticon/emoticon19.gif

一個是衣服樣式 『 圓T 」 『 帽 T 』 『 襯衫 』
一個是顏色 「 紅 」「藍」 「白」
一個是圖樣 「斜紋」 「直條」 「格子」
一個是 「口袋」「無口袋」 「二邊口袋」

比較差的方式


var 衣服樣式 = " 圓T";
var 顏色 = "紅";
var 圖樣 = "斜紋";
var 口袋 = "口袋";

$("#衣服樣式").click(function(iii){
衣服樣式 =iii;
$("#BIG").attr( "src" , "img/suit" +衣服樣式+顏色+圖樣+口袋+ ".jpg" );	
}

$("#顏色").click(function(iii){
顏色 =iii;
$("#BIG").attr( "src" , "img/suit" +衣服樣式+顏色+圖樣+口袋+ ".jpg" );	
}
...略

因為移除的時候會用到吧,實務上不可能這樣做,如果有幾千種組合和就要做幾千張圖了

Luke iT邦新手 4 級 ‧ 2018-08-23 13:18:27 檢舉

移除 /images/emoticon/emoticon19.gif
那就裸體了/images/emoticon/emoticon07.gif

所以這個是比較差的方式/images/emoticon/emoticon01.gif

移除是指在選擇別的樣式的時候,要考慮哪些樣式要拿掉,才不會奇怪,例如衣服是否要重覆穿,或是某些配件不和某些配件同時存在之類的,業界是沒有什麼比較差的方法,只有能用跟不能用的方法

1
Benchm
iT邦新手 5 級 ‧ 2018-08-23 15:42:45

"各"位大師 才對../images/emoticon/emoticon10.gif

我要發表回答

立即登入回答