ループを作成してボタンjqueryまたはjavascriptを作成する

ループを繰り返してボタンを動的に作成するのに問題があります。私はこれでかなり新しいので、どこに間違っているのかはわかりません。ここに私がこれまで持っているものがあります。何かアドバイス？ループを作成してボタンjqueryまたはjavascriptを作成する

<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Document</title> 
<script src='http://code.jquery.com/jquery-2.1.3.min.js'></script> 
<script type="text/javascript"></script> 
<script src="giphy.js"></script> 
</head> 
<body> 
    <div id="buttonDiv"></div> 
    <div id="gifsAppearHere"></div> 
    </body> 
    </html> 


var topics = ['bikram', 'yoga', 'vegan', 'vegetarian','nutrition', 'exercise', 'pilates','calisthenics', 'ashtanga', 'vinyasa', 'utkatasana'] 
for (var i = 0; i < topics.length; i++) { 
    var buttons = $('<button>'+ topics.text + '</button>') 
    buttons.append('topics'); 
}

出典

2016-11-07 C.Chaney

あなたはhtmlでも投稿できますか？ – Erik

あなたはちょうどボタンを作成しました....今あなたはどのDOM要素にも要素を追加する必要があります... –

あなたはあなたのhtmlも投稿した場合、非常に役に立ちます。 – Tinsten

ドキュメントをもう一度見てください。 appendを使用しましたが、appendTo（間違えやすい）を使用したかったのです。

appendは、あなたが呼び出したものに引数として渡すものを追加します。

appendToは、渡すものを引数として渡します。

タグ名がtopicsの要素を探すセレクタ"topics"もあります。 <topics>...</topics>。クラスセレクタ（".topics"）、またはIDセレクタ（"#topics"）を使用している可能性があります。

topics.textあなたはtopics[i]を意味すると思っています（問題のコードを単純化するとエラーが発生する可能性があります）。

例：私はあなたが正しい軌道に乗っていると思う

var pages = ['bikram', 'yoga', 'vegan', 'vegetarian', 'nutrition', 'exercise', 'pilates','calisthenics', 'ashtanga', 'vinyasa', 'utkatasana']; 
 
var pageButtons = $('#pageButtons'); 
 
for (var i = 0; i < pages.length; i++) { 
 
    pageButtons.append('<input type="button" id="button' + i + '" value="' + pages[i] + '"/>'); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="pageButtons"> 
 

 
</div>

出典

2016-11-07 18:19:59

使用してインラインコード、あなただけのクーデターを持っていますル

var buttons = $('div.buttons') // some div for your buttons 
var topics = ['bikram', 'yoga', 'vegan', 'vegetarian', 'nutrition', 'exercise', 'pilates','calisthenics', 'ashtanga', 'vinyasa', 'utkatasana'] 
for (var i = 0; i < topics.length; i++) { 
    var buttonsb = $('<button>'+ topics.text[0] + '</button>') 
    buttons.append('topics'b); 
}

を修正する事は、私はおそらく

for (let text of topics) 
    $('<button></button').text(text).appendTo('div.buttons')

出典

2016-11-07 18:20:25 Mahi

var topics = ['bikram', 'yoga', 'vegan', 'vegetarian', 'nutrition', 'exercise', 'pilates','calisthenics', 'ashtanga', 'vinyasa', 'utkatasana'] 
 
for (var i = 0; i < topics.length; i++) { 
 
    var buttons = $('<button>'+ topics[i] + '</button>') 
 
    buttons.appendTo('#topics'); 
 
}

<div id="topics"></div><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

出典

2016-11-07 18:20:25 naomik

カントーこのようにそれを行うだろう、私はあなたがやろうとしているものの完全にはよく分からないけど、これは私がそのコードを書くでしょうかです。これにより、11個のボタンに名前が付けられます。

こちらがお役に立てば幸いです。

var topics = ['bikram', 'yoga', 'vegan', 'vegetarian', 'nutrition','exercise', 'pilates','calisthenics', 'ashtanga', 'vinyasa', 'utkatasana']; 
for (var i = 0; i < topics.length; i++) { 
    var button = $('<button>'+ topics[i] + '</button>') 
    $('.div-with-btns').append(button); /*div that holds your btns*/ 
}

出典

2016-11-07 18:23:50 Tinsten

答えて

関連する問題