如何使用DOM获取孩子的ID

How to get the child's ID using DOM

本文关键字:ID 孩子 获取 何使用 DOM      更新时间:2023-09-26
$( document ).ready(function myFunct() {
    var platforms = "${platforms}";
    var platformList = platforms.split(",");
    var btn = new Array(platformList.length);
    var image_id = new Array(platformList.length);
    var img = new Array(platformList.length);
    for(i=0;i<platformList.length;i++)
    {
        image_id[i]=100*i-1 + "";
        console.log(image_id);
        btn[i]=document.createElement("button");
        img[i]=document.createElement("image");
        btn[i].appendChild(img[i]);  
        btn[i].appendChild(document.createTextNode(platformList[i]));
        document.body.appendChild(btn[i]);
       // document.body.appendChild(img[i]);
        btn[i].setAttribute("id",i+"");
        img[i].setAttribute("src","");
        img[i].setAttribute("id",image_id);
        console.log("button id is: "+i+" and image id is :"+image_id[i]);
        console.log("hiding");
        $("#"+i).hide();
    }
    var testId = "${testId}";
    console.log("hey");
    var is_loaded = false;
    var delay = 1;

function fetchFunct(){
        console.log("entered function");
        $.ajax
            ({
              type: "GET",
              url: "/content/mosaic/multi/preview/status/"+testId ,
              async: true,
              dataType : "json",
              success : function(response)
              {
                  console.log(response);
                  console.log(response.images);
                  if(response.status === false)
                  {
                  //something
                  }
                  else
                  {
                      for(i=0;i<platformList.length;i++)
                      {
                          $("#"+i).show();
                          console.log("image id is : "+image_id[i]);
                          console.log(platformList[i]);
                          console.log("Loading :"+i);
                          $("#"+i).click(function(){
                          console.log(this.id);
                          console.log("the first child is :"+this.NEED_CHILD'S_ID);
                          alert("you clicked the "+platformList[this.id]+" button");
                          $("#"+NEED_CHILD'S_ID).attr("src","http://" + response.images.platformList[this.id]);
                          })
                       }
                  }
              }

platformList contains = {android22, android4 ..等}我试图根据输入平台列表动态创建按钮,并单击按钮,我想显示相应的图像。但我面临两个问题:

  1. 检索按钮子节点的id(即图像)

  2. 如果我试图将源属性更改为response.images.platformlist[this. properties],则会出现错误。,它接受硬编码的东西,比如图像。android22等等但是我想把它改成变量

在按钮的点击功能中可以使用:

$(this).find("img").attr("src","http://" + response.images.platformList[this.id]);

见:http://api.jquery.com/find/

我已经创建了一个JS-Fiddle供您使用。您应该将示例简化为jsFiddle,以便人们可以帮助您:http://jsfiddle.net/cLK2z/