2017-03-03 63 views
0

我想要做的是添加一个ID到我的动态信息。这条线尝试分配ID为循环功能

var webaddress = '<img id= "[index]" src="http://pokeapi.co/media/img/[index].png">'; 

如果我拿出id="[index]循环工作正常,给我的图像。但我需要为它们添加一个ID,以便我可以做其他的事情。如果有人能告诉我如何改变docuent.write(text)来写入specfice div,所以我可以把我的脚本放在页面顶部,奖励帮助会很好。

<!DOCTYPE html> 
<html> 

<head> 
    <title></title> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
    </style> 
    <script type="text/javascript" rel="script" type="script" href="script.jss"></script> 
    <script type="text/javascript" src='http://code.jquery.com/jquery-1.10.2.min.js'></script> 
    <script type="text/javascript"> 
    $(document).ready(function() { 



    }); 
    </script> 
</head> 

<body> 
    <div id="wrapper"> 
    </div> 
    <div id="pokedeck"> 
     <div id="pokelist"> 
      <script type="text/javascript"> 
      var webaddress = '<img id= "[index]" src="http://pokeapi.co/media/img/[index].png">'; 
      var text = ""; 
      for (var i = 1; i <= 152; i++) { 
       text += webaddress.replace("[index]", i); 
      } 
      document.write(text); 
      </script> 
     </div> 
     <div id="deck1"></div> 
    </div> 
+0

在哪方式是这个代码不工作?目前的产出是多少? – David

+0

它没有分配id与id索引部分在前面的图片不呈现。如果我拿出前面的索引,图片渲染就不会给我这个ID。 –

+0

什么是'152',你想添加152'img'标签? – Sravan

回答

2

方括号是特殊字符,因此您需要将它们转义出来。请参阅下面的代码(我已添加注释的话)

// the following goes in your document ready 
 

 
var webaddress = '<img id= "[index]" src="http://pokeapi.co/media/img/[index].png">'; 
 
var pokelist = $('#pokelist');    // get your pokelist 
 

 
for (var i = 1; i <= 152; i++) { 
 
    var image = webaddress.replace(/\[index\]/g, i); // escape your square brackets and make it a global replace - anything inside the// is replaced and the g means all occurences of 
 
    pokelist.append(image);       // append it to your div 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
</div> 
 
<div id="pokedeck"> 
 
    <div id="pokelist"> 
 
    </div> 
 
    <div id="deck1"></div> 
 
</div>

我也会将你的脚本之前结束标记,而不是让他们在头