javascript - 小物品列表模板

Question

我想创造这样的东西

我需要用 JS/jQuery 创建它吗？它会是什么样子？任何代码片段，请..例如，当我选择1B时，它将返回我1张图像，当2a时，它将返回其他图像

1 2 3

a b c

更新：

  <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

您可以使用以下图像网址：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);
                }

                });
            });
        });