如何保存通過jQuery創建的每個標籤的用戶輸入？

-1

我正在研究一個項目，該項目允許用戶通過jQuery創建每個選項卡。這些選項卡是在用戶單擊「添加」按鈕時創建的。 Jquery爲每個選項卡生成一組複選框，並允許用戶檢查他們想要的任意數量的框。問題在於它看起來像共享相同的複選框，因爲一個選項卡中的複選框將其轉移到另一個選項卡。這是會話存儲的東西嗎？我必須爲每個複選框指定一個唯一的名稱嗎？不太確定只有jQuery纔有可能。如何保存通過jQuery創建的每個標籤的用戶輸入？

我意識到這樣的事情會更容易使用堆棧，但我這樣做是爲了更好地理解該過程。

混帳：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); 
       } 
}

來源

2016-07-14 Froy

在您提供的鏈接中看不到錯誤。它似乎工作正常。 – andrescpacheco

@andrescpacheco沒有輸出錯誤。問題是，即時通訊試圖讓每個標籤舉行自己獨立的複選框。 – Froy

發佈所有相關代碼本身。問題應該是自成體系的。我們不應該離開現場，並通過回購來試圖審查您的問題。看到[mcve] – charlietfl

正如你已經注意到了，不會發生錯誤，當你選擇不同的名稱。 jQuery的DOM操作都是關於選擇器的。如果您只是使用數據屬性或類作爲選擇器，則您的jQuery調用將影響所有匹配的元素。如果您希望每個選項卡都是唯一的，則必須創建唯一的ID選擇器或通過其位置引用它們。

$('.tab').eq(position);

來源

2016-07-14 15:29:04

我沒有意識到，每個選項卡添加到輸入相同的ID將解決此問題。謝謝您的幫助！ – Froy

如何保存通過jQuery創建的每個標籤的用戶輸入？

回答

相關問題