2014-05-20 99 views
0

我已經提出了一個應用程序,其中用戶呈現一堆圖像,在那裏他點擊圖像並根據該圖像提供另一個圖像,例如我該怎麼做才能讓這段代碼正常工作

male->body_type_a->below_18->recommended_a 
male->body_type_b->below_18->recommended_b 
male->body_type_c->below_18->recommended_c 
male->body_type_a->above_18->recommended_a 
male->body_type_b->above_18->recommended_b 
male->body_type_c->above_18->recommended_c 
male->body_type_a->above_35->recommended_a 
male->body_type_b->above_35->recommended_b 
male->body_type_c->above_35->recommended_c 

女性相似,現在我粘貼這段代碼,如何結識單擊的圖像由用戶,以便最後一步後,我可以在他點擊了哪些瞭解它們的網址基地,我米無法得到什麼圖像用戶點擊,我已經粘貼在jsfiddle的代碼點擊這裏view對不起的代碼是更大的方式

+0

html在哪裏? –

+0

http://jsfiddle.net/4AZdj/ – avinashizhere

回答

0

由於選擇類型是相似的你c一個折射三個功能合爲一體,並確定點擊圖像所採用的路線。

var IMG_MALE = "http://placehold.it/50x50/343434&text=Male"; 
var IMG_FEMALE = "http://placehold.it/50x50/dedede&text=Female"; 

var IMG_ECTO = "http://placehold.it/50x50/343434&text=Ecto"; 
var IMG_ENDO = "http://placehold.it/50x50/343434&text=Endo"; 
var IMG_MESO = "http://placehold.it/50x50/343434&text=Meso"; 

var IMG_AGE_18 = "http://placehold.it/50x50/343434&text=-18"; 
var IMG_AGE_1835 = "http://placehold.it/50x50/343434&text=18-35"; 
var IMG_AGE_35 = "http://placehold.it/50x50/343434&text=35+"; 

var IMG_PROD_BULK = "http://placehold.it/50x50/343434&text=Bulk"; 
var IMG_PROD_FIT = "http://placehold.it/50x50/343434&text=Fit"; 
var IMG_PROD_MUSCLE = "http://placehold.it/50x50/343434&text=Muscle"; 

$(document).ready(function() { 
    var state = 0; 
    var link = new Array(4); 
    var male = ""; 

    // using images that have id starting with '#img' can narrow if required 
    $("img").click(function (e) { 
     $("img").removeClass('animated fadeIn'); 

     var src = $(e.target).attr("src"); 

     switch (src) { 
      case IMG_MALE: 
       link[0] = src; 
       $('#runtime-text').text("SELECT YOUR BODY TYPE :"); 
       $('#img1').attr("src", IMG_ECTO); 
       $('#img2').attr("src", IMG_ENDO); 
       $('#img3').attr("src", IMG_MESO); 
       break; 

      case IMG_ECTO: 
      case IMG_ENDO: 
      case IMG_MESO: 
       link[1] = src; 
       $('#runtime-text').text("SELECT YOUR AGE :"); 
       $('#img1').attr("src", IMG_AGE_18); 
       $('#img2').attr("src", IMG_AGE_1835); 
       $('#img3').attr("src", IMG_AGE_35); 
       break; 

      case IMG_AGE_18: 
      case IMG_AGE_1835: 
      case IMG_AGE_35: 
       link[2] = src; 
       $('#runtime-text').text("SELECT PRODUCT FOR :"); 
       $('#img1').attr("src", IMG_PROD_BULK); 
       $('#img2').attr("src", IMG_PROD_FIT); 
       $('#img3').attr("src", IMG_PROD_MUSCLE); 
       break; 

      case IMG_PROD_BULK: 
      case IMG_PROD_FIT: 
      case IMG_PROD_MUSCLE: 
       link[3] = src; 
       alert("User selected " + link[0] + " -> " + link[1] + " -> " + link[2] + " -> " + link[3]); 
       $('#btn1').click(); 
       break; 

      default: 
       break; 
     } 

     $("img").addClass('animated fadeIn'); 
    }) 

    $('#btn1').click(function() { 
     console.log("btn"); 
     $('#img1').attr("src", IMG_MALE); 
     $('#img2').attr("src", IMG_FEMALE); 
     $('#img3').attr("src", ""); 

     $("img").addClass('animated fadeIn'); 
    }) 
}); 

上面的代碼使用一般img選擇器,則可以通過使用正確的類等等。結果目前提醒屏幕切換到更具體的,但它可以被用來確定用戶已經採取的路徑。 jsFiddle at - http://jsfiddle.net/sRD5r/

相關問題