Question

我正在尝试创建一个HTML页面，其中我有一个表单，其元素必须跨不同的选项卡进行复制，每个选项卡采用不同的值。我提到http://junaidqadir.com/dynamically-add-remove-and-re-number-tabs-in-twitter-bootstrap/。我尝试了以下方法：

<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
var dictionary={};
function updateDictionary(key1,key2,new_value)
{
    if (!dictionary[key1])
          dictionary[key1] = [];   
    dictionary[key1][key2] = new_value;
}

    var pageImages = [];
    var pageNum = 1;
/**
* Reset numbering on tab buttons
*/
function reNumberPages() {
    pageNum = 1;
    var tabCount = $('#pageTab > li').length;
    $('#pageTab > li').each(function() {
        var pageId = $(this).children('a').attr('href');
        if (pageId == "#page1") {
            return true;
        }
        pageNum++;
        $(this).children('a').html('Page ' + pageNum +
            '<button class="close" type="button" ' +
            'title="Remove this page">×</button>');
    });
}

    var appNo = 0;

    $(document).ready(function() {
        /**
         * Add a Tab
         */
        $('#btnAddPage').click(function() {
        pageNum++;
        $('#pageTab').append(
            $('<li><a href="#page' + pageNum + '">' +
            'Page ' + (pageNum-1) +
            '<button class="close" type="button" ' +
            'title="Remove this page">×</button>' +
            '</a></li>'));
        appNo++;
        $('#pageTabContent').append(
            $('<h4>Please add information</h4><ul style="font-size:12px"><li><strong>Designation:</strong><br><input type="radio" onclick=updateDictionary(\'application"+appNo+"\',\'designation\',\'teacher\') name="designation\'+appNo\'" value="teacher">Teacher<br><input type="radio" onclick=updateDictionary(\'application"+appNo+"\',\'designation\',\'student\') name="designation\'+appNo\'" value="student">Student<br></li><br><li><strong>Name:</strong><br><input type="text" name="name\'+appNo\'" id="name\'+appNo\'" size="25" onblur=updateDictionary(\'application"+appNo+"\',\'name\',document.getElementById("name\'+appNo\'").value><br></li><br><li><strong>Username:</strong><br><input type="text" name="username\'+appNo\'" id="username\'+appNo\'" size="25" onblur=updateDictionary(\'application"+appNo+"\',\'name\',document.getElementById("username\'+appNo\'").value><br></li><br><li><strong>Email:</strong><br><input type="text" name="email\'+appNo\'" id="email\'+appNo\'" size="25" onblur=updateDictionary(\'application"+appNo+"\',\'name\',document.getElementById("email\'+appNo\'").value><br></li><br></ul>));

        $('#page' + pageNum).tab('show');
        });

/**
* Remove a Tab
*/
$('#pageTab').on('click', ' li a .close', function() {
var tabId = $(this).parents('li').children('a').attr('href');
$(this).parents('li').remove('li');
$(tabId).remove();
reNumberPages();
$('#pageTab a:first').tab('show');
});

/**
 * Click Tab to show its content 
 */
$("#pageTab").on("click", "a", function(e) {
e.preventDefault();
$(this).tab('show');
});
});
</script>
<body>
<div class="container1">
    <a href="javascript:;" id="btnAddPage" role="button">Add Page</a>  
    <ul id="pageTab" class="nav nav-tabs">
        <li class="active"><a href="#page1" data-toggle="tab">Page0</a></li>
    </ul>
    <div id="pageTabContent" class="tab-content">
        <div class="tab-pane active" id="app0">     
            <h4>Please add information</h4>
            <ul style="font-size:12px">
            <li><strong>Designation:</strong><br>
                <input type="radio" onclick=updateDictionary('application"+appNo+"','designation','teacher') name="designation'+appNo'" value="teacher">Teacher<br>
                <input type="radio" onclick=updateDictionary('application"+appNo+"','designation','student') name="designation'+appNo'" value="student">Student<br>
            </li>
            <br>
            <li><strong>Name:</strong><br>
                <input type="text" name="name'+appNo'" id="name'+appNo'" size="25" onblur=updateDictionary('application"+appNo+"','name',document.getElementById("name'+appNo'").value><br>
            </li>
            <br>
            <li><strong>Username:</strong><br>
                <input type="text" name="username'+appNo'" id="username'+appNo'" size="25" onblur=updateDictionary('application"+appNo+"','name',document.getElementById("username'+appNo'").value><br>
            </li>
            <br>
            <li><strong>Email:</strong><br>
                <input type="text" name="email'+appNo'" id="email'+appNo'" size="25" onblur=updateDictionary('application"+appNo+"','name',document.getElementById("email'+appNo'").value><br>
            </li>
            <br>
            </ul>
        </div>               
    </div>
    <br/>
    <br/>
</div>
<center><input type="submit" onclick=final() value="Submit" style="background-color:#4CAF50"></center>
</body>
</html>

有很多这样的元素。但是，当我在一个选项卡中输入值时，相同的值会反映在其他选项卡中。解决方案是什么？

Answer 1

当我接受您的代码并尝试使用代码段时，运行它时会出现一个错误：

var dictionary={};
function updateDictionary(key1,key2,new_value)
{
    if (!dictionary[key1])
          dictionary[key1] = [];   
    dictionary[key1][key2] = new_value;
}

    var pageImages = [];
    var pageNum = 1;
/**
* Reset numbering on tab buttons
*/
function reNumberPages() {
    pageNum = 1;
    var tabCount = $('#pageTab > li').length;
    $('#pageTab > li').each(function() {
        var pageId = $(this).children('a').attr('href');
        if (pageId == "#page1") {
            return true;
        }
        pageNum++;
        $(this).children('a').html('Page ' + pageNum +
            '<button class="close" type="button" ' +
            'title="Remove this page">×</button>');
    });
}

    var sourceNo = 0;

    $(document).ready(function() {
        /**
         * Add a Tab
         */
        $('#btnAddPage').click(function() {
        pageNum++;
        $('#pageTab').append(
            $('<li><a href="#page' + pageNum + '">' +
            'Page ' + (pageNum-1) +
            '<button class="close" type="button" ' +
            'title="Remove this page">×</button>' +
            '</a></li>'));
        sourceNo++;
        $('#pageTabContent').append(
            $('<div id="source'+sourceNo+'"><h4>SOURCE(Group for specifying the source properties. Can be multiple sources.)</h4><ul style="font-size:12px"><li><strong>enable:</strong>(Boolean value to enable or disable the source)<br><input type="radio" onclick=updateDictionary(\'source"+sourceNo+"\',\'enable\',0) name="enable_source\'+sourceNo\'" value="0"> 0<br><input type="radio" onclick=updateDictionary(\'source"+sourceNo+"\',\'enable\',1) name="enable_source\'+sourceNo\'" value="1"> 1<br></li><br><li><strong>type:</strong>(Type of the source. Other properties of the source depend on the type.)<br><input type="radio" onclick=updateDictionary(\'source"+sourceNo+"\',\'type\',1) name="type\'+sourceNo\'" value="1"> 1(Camera - NV Proprietary path (nvcamerasrc))<br><input type="radio" onclick=updateDictionary(\'source"+sourceNo+"\',\'type\',2) name="type\'+sourceNo\'" value="2"> 2(Camera - Open source V4L2 path (v4l2src))<br><input type="radio" onclick=updateDictionary(\'source"+sourceNo+"\',\'type\',3) name="type\'+sourceNo\'" value="3"> 3(URI - URI where an encoded stream is available (file/http/rtsp))<br></li><br><li><strong>camera-width:</strong>(Width of frames to be requested from camera, in pixels. Valid only when type=1,2)<br><input type="text" name="camera-width\'+sourceNo\'" id="camera-width\'+sourceNo\'" size="25" placeholder="Integer greater than 0" onblur=updateDictionary(\'source"+sourceNo+"\',\'camera-width\',document.getElementById("camera-width\'+sourceNo\'").value><br></li><br><li><strong>camera-height:</strong>(Height of frames to be requested from camera, in pixels. Valid only when type=1,2)<br><input type="text" name="camera-height\'+sourceNo\'" id="camera-height\'+sourceNo\'" size="25" placeholder="Integer greater than 0" onblur=updateDictionary(\'source"+sourceNo+"\',\'camera-height\',document.getElementById("camera-height\'+sourceNo\'").value><br></li><br><li><strong>camera-fps-n:</strong>(Numerator part of framerate (fraction) to be requested from camera, in pixels. Vaild only when type=1,2)<br><input type="text" name="camera-fps-n\'+sourceNo\'" id="camera-fps-n\'+sourceNo\'" size="25" placeholder="Integer greater than 0" onblur=updateDictionary(\'source"+sourceNo+"\',\'camera-fps-n\',document.getElementById("camera-fps-n\'+sourceNo\'").value><br></li><br><li><strong>camera-fps-d:</strong>(Denominator part of framerate (fraction) to be requested from camera, in pixels. Vaild only when type=1,2)<br><input type="text" name="camera-fps-d\'+sourceNo\'" id="camera-fps-d\'+sourceNo\'" size="25" placeholder="Integer greater than 0" onblur=updateDictionary(\'source"+sourceNo+"\',\'camera-fps-d\',document.getElementById("camera-fps-d\'+sourceNo\'").value><br></li><br><br><li><strong>camera-csi-sensor-id:</strong>(Sensor ID for the NV acclerated camera capture path. Refer to "sensor-id" property of "nvcamerasrc". Valid only when type=1)<br><input type="text" name="camera-csi-sensor-id\'+sourceNo\'" id="camera-csi-sensor-id\'+sourceNo\'" size="25" placeholder="Integer>=0" onblur=updateDictionary(\'source"+sourceNo+"\',\'camera-csi-sensor-id\',document.getElementById("camera-csi-sensor-id\'+sourceNo\'").value><br></li><br><br><li><strong>camera-v4l2-dev-node:</strong>(Number of the v4l2 dev node i.e. /dev/video<num> for the open source V4L2 camera capture path. Valid only when type=2)<br><input type="text" name="camera-v4l2-dev-node\'+sourceNo\'" id="camera-v4l2-dev-node\'+sourceNo\'" size="25" placeholder="Integer>=0" onblur=updateDictionary(\'source"+sourceNo+"\',\'camera-v4l2-dev-node\',document.getElementById("camera-v4l2-dev-node\'+sourceNo\'").value><br></li><br><br><li><strong>uri:</strong>(URI to the encoded stream. Can be a file,HTTP URI or an RTSP live source. Valid only when type=3)<br><input type="text" name="uri\'+sourceNo\'" id="uri\'+sourceNo\'" size="25" placeholder="String mentioning the URI of the source" onblur=updateDictionary(\'source"+sourceNo+"\',\'uri\',document.getElementById("uri\'+sourceNo\'").value><br></li><br></ul></div>'));

        $('#page' + pageNum).tab('show');
        });

/**
* Remove a Tab
*/
$('#pageTab').on('click', ' li a .close', function() {
var tabId = $(this).parents('li').children('a').attr('href');
$(this).parents('li').remove('li');
$(tabId).remove();
reNumberPages();
$('#pageTab a:first').tab('show');
});

/**
 * Click Tab to show its content 
 */
$("#pageTab").on("click", "a", function(e) {
e.preventDefault();
$(this).tab('show');
});
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container1">
    <a href="javascript:;" id="btnAddPage" role="button">Add Page</a>  
    <ul id="pageTab" class="nav nav-tabs">
        <li class="active"><a href="#page1" data-toggle="tab">Page0</a></li>
    </ul>
    <div id="pageTabContent" class="tab-content">
        <div class="tab-pane active" id="source0">     
            <h4>Please add information</h4>
            <ul style="font-size:12px">
            <li><strong>Designation:</strong><br>
                <input type="radio" onclick=updateDictionary('application"+appNo+"','designation','teacher') name="designation'+appNo'" value="teacher">Teacher<br>
                <input type="radio" onclick=updateDictionary('application"+appNo+"','designation','student') name="designation'+appNo'" value="student">Student<br>
            </li>
            <br>
            <li><strong>Name:</strong><br>
                <input type="text" name="name'+appNo'" id="name'+sourceNo'" size="25" onblur=updateDictionary('application"+appNo+"','name',document.getElementById("name'+appNo'").value><br>
            </li>
            <br>
            <li><strong>Username:</strong><br>
                <input type="text" name="username'+appNo'" id="username'+sourceNo'" size="25" onblur=updateDictionary('application"+appNo+"','name',document.getElementById("username'+appNo'").value><br>
            </li>
            <br>
            <li><strong>Email:</strong><br>
                <input type="text" name="email'+appNo'" id="email'+sourceNo'" size="25" onblur=updateDictionary('application"+appNo+"','name',document.getElementById("email'+appNo'").value><br>
            </li>
            <br>
            </ul>
        </div>               
    </div>
    <br/>
    <br/>
</div>
<center><input type="submit" onclick=final() value="Submit" style="background-color:#4CAF50"></center>

多个选项卡中的相同表单元素

1 个答案: