2017-03-03 9 views
0

私がしようとしているのは、自分の動的情報にIDを追加することです。私はid="[index]を取る場合は、この行forループ関数にidを代入しようとしています

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

は、ループが正常に動作してくれたイメージを与えます。しかし、私は他のものをすることができるように私はそれらのすべてにIDを追加する必要があります。ボーナスヘルプは誰かが私のスクリプトをページの一番上に置くことができるようにspecuice divに書き込むためにdocuent.write(テキスト)を変更する方法を教えてもらえるといいでしょう。

<!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を割り当てないでください。私がフロントインデックスを取り出すと、絵がレンダリングされるだけで、私はアイデアを与えられません。 –

+0

そこには '152'があり、152の' img'タグを追加したいのですか? – Sravan

答えて

2

大括弧はエスケープする必要がある特殊文字です。何で私も

をちょうど終了bodyタグの前に、スクリプトを動かすのではなく、ヘッダーでそれらを持っているでしょう以下のコード(私はそれにコメントを追加している)

// 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>

関連する問題