使用jquery动态显示图像

时间:2012-08-10 16:32:23

标签: jquery

我目前正在使用jquery和jstree插件来显示图像。我正在基于具有节点的xml文件构建树。有趣的是,我正在使用一些第三方工具创建图像。图像名称是-model.png。选择节点时,根据树上的node_id,我在div上显示图像。

它可以工作,但问题不是所有节点都有相同数量的图像。例如,node_a将有10个图像,node_b将有2个图像等。而不是手动创建div并基于图像,隐藏或显示;我想动态显示图像。如果在树上单击了node_A,我应该能够使用jquery在右侧看到2列格式的所有图像。

我目前的代码是这样的:                                                             

    <div id="column_2">
        <div id="2_div1" ></div>
        <div id="2_div2" "></div>
        <div id="2_div3" ></div>
    </div>

left是我的div来构建jstree

$("#left").jstree("toggle_node", data.rslt.obj);

var node_id = data.rslt.obj.attr("id");

node_id是所有图像都具有的唯一ID。基于汽车制造。例如,它将是GM-Make,Ford-Make,Toyota-Make等

  if (node_id.indexOf("Make")>=0)
    {
      var Img_year_2012 = "node_id+"-year_2012.png";
       $(function () { 
         $('#1_div1').html("").css({"border": "", "margin": "0"});
        var myImage1 = new Image(); 
        $(myImage1).load(function () 
        {  

        $("#1_div1").html(myImage1).css({"border":"2px solid #E0E0E0", "margin": "20px 20px 20px 0"});
         $( '#1_div1 img' ).css({ "width": "600px", "height" : "650px" });


        })         
        .attr('src', Img_year_2012).error(function(){
            $('#1_div1').html("").css({"border": "", "margin": "0"});
            })

        });

而不是像这样做,我如何只显示属于节点ID的每个图像?

1 个答案:

答案 0 :(得分:0)

也许我误解了这个问题,但您是否尝试过迭代遍历每个节点的for循环?有点像:http://www.w3schools.com/dom/dom_nodes_traverse.asp