Question

我正在开发一个项目，允许用户检查通过jQuery创建的每个选项卡的框。当用户单击“添加”按钮时，将创建选项卡。 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);
                }
}

Answer 1

正如您已经注意到，当您选择不同的名称时，不会发生错误。使用jQuery进行DOM操作完全是关于选择器的。如果您只使用数据属性或类作为选择器，则jQuery调用将影响所有匹配的元素。如果您希望每个选项卡都是唯一的，则必须创建唯一的ID选择器或按其位置引用它们。

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

如何保存通过jQuery创建的每个选项卡的用户输入？

1 个答案: