小項目列表模板

Question

我想創建類似this

我是否需要使用JS/jQuery創建它？它將如何看起來像？任何代碼片段，請.. 舉例而言，當我選擇1B它將返回我1個圖像，2A時，它會返回其他圖像

一個 b Ç

UPDATE：

<script> 

    //returning frame data att 
    $(document).ready(function() { 
    $(function(){ 
     $('.frame').click(function(){ 
      alert($(this).data("frame")); 
      }); 
     }); 
    }); 


    //returning roof data att 
    $(document).ready(function() { 
    $(function(){ 
     $('.roof').click(function(){ 
      alert($(this).data("roof")); 
      }); 
     }); 
    }); 



    </script> 

<h3>Frame</h3> 
    <a href="#" class="frame" data-frame="1">Blue</a><br/> 
    <a href="#" class="frame" data-frame="2">Red</a><br/> 
    <a href="#" class="frame" data-frame="3">Green</a><br/> 
    <a href="#" class="frame" data-frame="4">Purple</a> 


    <h3>Roof</h3> 

    <a href="#" class="roof" data-roof="1">Clear</a><br/> 
    <a href="#" class="roof" data-roof="2">Moodust</a><br/> 
    <a href="#" class="roof" data-roof="3">Yellow</a><br/> 

現在我有警報，哪個框被點擊。現在我需要將它們分組。再舉例來說，當我點擊框藍色它將選擇藍色，當我點擊清除，它會被選中，並告訴我像1_1.jpeg的輸出，或類似的東西

小提琴 - http://jsfiddle.net/antonoff/pPvmy/

Answer 1

你可以有圖像的URL：http://jsfiddle.net/pPvmy/1/

在這段代碼，IMAGEURL是你的網址...

var framechoice = ''; 
var roofchoice=''; 

$(document).ready(function() { 
     $(function(){ 
      $('.frame').click(function(){ 
       alert($(this).data("frame")); 
       framechoice = $(this).data("frame"); 
       }); 
      }); 
     }); 

     $(document).ready(function() { 
     $(function(){ 
      $('.roof').click(function(){ 
       alert($(this).data("roof")); 
       roofchoice = $(this).data("roof"); 

       if(framechoice !='' && roofchoice != '') 
       { 
        var imageurl = 'image'+ framechoice +'_'+roofchoice+'.jpg'; 
        alert(imageurl); 
       } 

       }); 
      }); 
     });