Question

$( 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 ..etc} 我试图根据输入platformList动态创建按钮，并单击我想要显示相应图像的按钮。但我面临两个问题：

检索按钮子项的ID（即图像）
如果我尝试将source属性更改为response.images.platformlist [this.id]，则会收到错误，它接受像images.android22等硬编码的东西，但我想让它变量
< / LI>

Answer 1

在您可以使用的按钮的单击功能中：

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

请参阅：http://api.jquery.com/find/

我为你创造了一个JS-Fiddle。您应该将您的示例缩小为jsFiddle，以便人们可以帮助您：http://jsfiddle.net/cLK2z/

如何使用DOM获取孩子的ID

1 个答案: