Форма клона с вкладками и классом Dynami c - PullRequest
Новая
       0

Форма клона с вкладками и классом Dynami c

0 голосов
/ 14 апреля 2020

Я пытаюсь клонировать форму с вкладками. Каждый клонированный экземпляр имеет присвоенный номер. 1, 2 et c для каждого клона, приращение. Каждая вкладка клона имеет атрибут href, сгенерированный динамически.

ссылки имеют атрибуты href, подобные этому 

<li class="active">
 <a href="#enInfo" data-toggle="tab">Home</a>
</li>
<li> 
 <a href="#spInfo" data-toggle="tab">Inicio</a>
</li>

для div-ов панели вкладок, идентичные идентификаторы 

<div class="tab-pane active" id="enInfo">English content</div>
<div class="tab-pane" id="spInfo">Contenido en espanol</div>

Я пытаюсь найти атрибут href каждого элемента (enInfo, spInfo) и сгенерировать идентичные идентификаторы для div «tab tab». Желаемый результат для клонированной формы должен быть (# enInfo2, # spInfo2) для первого клона, (# enInfo3, # spInfo3) для второго клона и т. Д. 

<li class="active">
  <a href="#enInfo2" data-toggle="tab">Home</a>
</li>
<li> 
  <a href="#spInfo2" data-toggle="tab">Inicio</a>
</li>

и 

<div class="tab-pane active" id="enInfo2">English content</div>
<div class="tab-pane" id="spInfo2">Contenido en espanol</div>

Вот код 

<!DOCTYPE html>
<html>
<head>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.js"></script>

</head>

<body>


<div id="sections">
  <div class="section">

    <h6>New stream</h6>


<div class="tab-group">
  <ul class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#enInfo" data-toggle="tab">Home</a></li>
    <li> <a href="#spInfo" data-toggle="tab">About</a></li>
  </ul>

  <div class="tab-content">
    <div class="tab-pane active" id="enInfo">English content</div>
    <div class="tab-pane" id="spInfo">Contenido en espanol</div>
  </div>
</div>


   <p><a href="#" class='remove'>Remove</a></p>

  </div>
</div>

<p><a href="#" class='addsection'>Add</a></p>



<script type="text/javascript" >
//define template
var template = $('#sections .section:first').clone();

//define counter
var sectionsCount = 1;


//add new section
$('body').on('click', '.addsection', function() {

    //increment
    sectionsCount++;

    //loop through each input
    var section = template.clone().find('.tab-group').each(function(){

        //set id to store the updated section number
        //var newId = this.id + sectionsCount;
        var newId = sectionsCount;

        //update id parent
        this.id = newId;


        $(this).prev().text('New stream ' + newId);


        $(this).parent().find('span').attr("id", + newId);
        $(this).parent().find('a').attr("href", + newId);


    }).end()


    //inject new section
    .appendTo('#sections');
    return false;
});

//remove section
$('#sections').on('click', '.remove', function() {
    //fade out section
    $(this).parent().fadeOut(300, function(){
        //remove parent element (main section)
        $(this).parent().empty(); // $(this).parent().parent().empty();
        return false;
    });
    return false;
});
</script>




    </body>
</html>

Полагаю, мне нужно как-то l oop элементов, но я не знаю, как мои jQuery, Javascript навыки ограничены и даже после часы и часы испытаний, не могу заставить его работать.

1 Ответ

1 голос
/ 15 апреля 2020

Да, вы правы, вам нужно будет l oop для каждого элемента (навигационные ссылки и панели вкладок), чтобы обновить атрибуты. Вот фрагмент стека, который служит тому, что вы ищете. 

//define template
var template = $('#sections .section:first').clone();

//define counter
var sectionsCount = 1;


//add new section
$('body').on('click', '.addsection', function() {

    //increment
    sectionsCount++;

    //loop through each tab-group if more than one
    var section = template.clone().find('.tab-group').each(function(){

        //set id to store the updated section number
        var newId = sectionsCount; 
				
        // set jquery elements
        const $this = $(this);
        const $sectionHeader = $this.prev();
        const $navLinks = $this.find('.nav-tabs li');
        const $tabPanes = $this.find('.tab-content .tab-pane');
        
        // set section header
        $sectionHeader.text($sectionHeader.text() + ' ' + newId);
        
        // set attributes for nav links
        $navLinks.each(function() {
        	const $anchor = $(this).find('a').first();
          $anchor.attr('href', $anchor.attr('href') + newId);
        });
        
        // set attributes for tab panes
        $tabPanes.each(function() {
          $(this).attr('id', $(this).attr('id') + newId);
        });
    }).end()


    //inject new section
    .appendTo('#sections');
    
    return false;
});

//remove section
$('#sections').on('click', '.remove', function() {
    //fade out section
    $(this).parent().fadeOut(300, function(){
        //remove parent element (main section)
        $(this).parent().empty(); // $(this).parent().parent().empty();
        return false;
    });
    return false;
});
body {
 background-color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sections">
  <div class="section">

    <h6>New stream</h6>


<div class="tab-group">
  <ul class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#enInfo" data-toggle="tab">Home</a></li>
    <li> <a href="#spInfo" data-toggle="tab">About</a></li>
  </ul>

  <div class="tab-content">
    <div class="tab-pane active" id="enInfo">English content</div>
    <div class="tab-pane" id="spInfo">Contenido en espanol</div>
  </div>
</div>


   <p><a href="#" class='remove'>Remove</a></p>

  </div>
</div>

<p><a href="#" class='addsection'>Add</a></p>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...