我有问题。
如果我单击“添加面板”,我想将具有唯一ID的第一个面板内容添加到每个“选项卡窗格”中。现在重复ID和重复内容。
如果内容是表格,我想在每个面板上对其进行编辑。
我该怎么办?
http://jsfiddle.net/agata666/5zLmtqby/4/
`
var $foo = $(".foo");
var hash = 1;
$(".add").on("click", function () {
var $newPanel = $foo.clone();
var hashClass = 'zone-panel-' + generateHash();
$newPanel.find(".collapse").removeClass("in");
$newPanel.find(".accordion-toggle").data('hash', hashClass).attr("href", "#" + (++hash)).text("panel " + hash);
$newPanel.find(".panel-collapse").attr("id", hash).addClass("collapse").removeClass("in");
$($newPanel).addClass(hashClass);
$("#accordion").append($newPanel.fadeIn());
var $tablesScreenSix = $(".tablesScreenSix");
var $tablesScreenSeven = $(".tablesScreenSeven");
var nextTab = $('.tabs li').size()+1;
$('<li class="' + hashClass + '"><a href="#tab' + nextTab + '" data-toggle="tab">panel ' + hash + '</a></li>').appendTo('.tabs');
$('<div class="tab-pane" id="tab'+nextTab+'"></div>').append($tablesScreenSix.clone()).appendTo('.tab-content').addClass(hashClass);
var nextTab2 = $('.tabs2 li').size()+1;
$('<li class="' + hashClass + '"><a href="#tab' + nextTab2 + '" data-toggle="tab">panel ' + hash + '</a></li>').appendTo('.tabs2');
$('<div class="tab-pane" id="tab'+nextTab2+'"> </div>').append($tablesScreenSeven.clone()).appendTo('.tab-content2').addClass(hashClass);
$('.tabs a:last').tab('show');
$('.tabs2 a:last').tab('show');
});
var panelDefault = document.querySelectorAll('.panel-default');
var exTabFirst = document.querySelectorAll('.exTabFirst');
var exTabSecond = document.querySelectorAll('.exTabSecond');
var addZoneButton = document.getElementById('add');
function generateHash(){
return Math.random().toString(16).substr(-5);
}
addZoneButton.addEventListener('click', function () {
var randomNumber = generateHash();
panelDefault.innerHTML = 'panel panel-default foo template ' + randomNumber;
exTabFirst.innerHTML = 'exTabFirst ' + randomNumber;
exTabSecond.innerHTML = 'exTabSecond ' + randomNumber;
});
`