-1
私は、ユーザーがjQueryを通じて作成されたタブごとのボックスをチェックすることを可能にするプロジェクトに取り組んでいます。ユーザーが[追加]ボタンをクリックすると、タブが作成されます。 Jqueryはタブごとに一連のチェックボックスを生成し、ユーザーが必要な数のボックスをチェックできるようにする必要があります。問題は、1つのタブ内のボックスをチェックすると、他のタブにそのチェックボックスを転送するので、同じチェックボックスを共有するように見えるということです。これはセッションストレージのためのものですか？各チェックボックスに一意の名前を付ける必要がありますか？これがjQueryだけで可能かどうかは不明です。jQueryによって作成されたタブごとにユーザー入力を保存するにはどうすればよいですか？
このようなことはスタックを使用する方が簡単だが、私はそのプロセスをよりよく理解するためにこれをやっていることを認識しています。
Gitリポジトリ：https://github.com/frfroylan/project_checklist リンク：http://proj-checklist.surge.sh/
HTML：
<body onload="script()">
<h1 class="h1-text">Product Checklist</h1>
<div class="wrapper">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist" id="tabs">
<li role="presentation" class="active" id="newTab"><a href="#new" role="tab" data-toggle="tab"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span></a></li>
</ul>
<!-- Tab info -->
<div class="tab-content" id="tab-content">
<div role="tabpanel" class="tab-pane active" id="new">
<p>New Product name:</p>
<input type="text" placeholder=" Product Name" id="newProductName">
<button onclick="genLi()">Add</button>
</div>
</div>
</div>
</body>
JS：あなたはすでにあなたが別の名前を選択したときにエラーが発生しない気づいたよう
script = function(){
newTabPanel = $('#new');
newTab = $('#newTab');
genLi = function(){
$('.active').removeClass('active');
var prodName = $('#newProductName').val();
var newLi = $('<li role="presentation" class="active" id="newTab"><a href="#' + prodName + '" role="tab" data-toggle="tab">'+ prodName +'</a></li>');
newTab.before(newLi);
genNewTabCont(prodName);
}
genNewTabCont = function(id){
var newTabPane = $('HTML_TO_LONG_CHECK_GIT');
newTabPanel.before(newTabPane);
}
}
提供したリンクのエラーは表示されません。それは正常に動作しているようです。 – andrescpacheco
@andrescpacheco出力されるエラーはありません。問題は、各タブに独自のチェックボックスを個別に表示させようとしていることです。 – Froy
問題のすべての関連コードを掲載してください。質問は自己完結型でなければなりません。サイトを離れてレポを突き抜けて、問題を再検討する必要はありません。 [mcve] – charlietfl