[Rails 6] cocoon_ Ajouter des attributs d'identifiant et de données au formulaire à ajouter

Environnement de développement

• Rails 6.0.3.4
• yarn 1.22.4

table des matières __1) Comment installer Cocoon 2) Ajouter un formulaire dynamiquement * Chikajika sera UP 3) Ajoutez des attributs d'id et de données au formulaire à ajouter __

3) Ajoutez des attributs d'identifiant et de données au formulaire à ajouter

__ Je pense qu'il est difficile de lire mon nom de classe et mon identifiant tels quels, alors j'utilise A, B et C pour une meilleure compréhension. __ Je pense publier une image GIF si j'en ai envie bientôt.

$(function() {
  //N'oubliez pas la définition d'abord.
  let index = 1;
  //Je ne savais pas quel cours prendre, alors j'ai essayé plusieurs fois.(.onegai)Est une expression de ce cœur.
  //En conséquence, dans mon cas"Bouton à ajouter"Quand"L'enfant que vous souhaitez ajouter"J'ai fait un div qui les renferme tous et leur ai donné une classe.
  $('.onegai')
     // 'cocoon:after-insert'Cet événement est Kimo. Il y a d'autres événements qui sont exécutés avant l'insertion et avant / après la suppression, donc si vous êtes intéressé, veuillez consulter le site officiel.
    .on('cocoon:after-insert', function(e, insertedItem) {
      //L'attribut de données est ajouté à l'élément inséré. Quand tu veux passer l'identifiant.Veuillez changer après attr.
      //Exemple).attr('id','index') **Au fait, l'index est une variable, donc tout est OK.
      $(insertedItem).find('.class-a').attr('data-a', index);
      $(insertedItem).find('.class-b').attr('data-b', index);
      $(insertedItem).find('.class-c').attr('data-c', index);
      //J'ajoute un par un ici.
      index = index+1

      //Si vous souhaitez déclencher un événement à l'aide de l'attribut de données donné, vous pouvez l'écrire ici.
      //Cette fois, lorsqu'un changement se produit dans A, c'est un événement pour mettre une valeur basée sur A dans le texte de B et C.
      $('.class-a').on('change',function(e){
      //dataA index(nombre)Devient.
        const dataA = $(this).attr('data-a')
        
        const dataB = $("option:selected", this).data("b");
        const dataC = $("option:selected", this).data("c");
        
        $(`[data-b="${dataA}"]`).text(dataB)
        $(`[data-c="${dataA}"]`).text(dataC)
      })
    })
})

__ ↓ ↓ ↓ C'était une version avec l'explication supprimée parce que c'était difficile à voir parce que l'explication était trop décrite. Si vous pouvez comprendre en regardant simplement le code, cliquez ici __

$(function() {
  //N'oubliez pas la définition d'abord.
  let index = 1;
  $('.onegai')
    .on('cocoon:after-insert', function(e, insertedItem) {
      $(insertedItem).find('.class-a').attr('data-a', index);
      $(insertedItem).find('.class-b').attr('data-b', index);
      $(insertedItem).find('.class-c').attr('data-c', index);
      index = index+1

      $('.class-a').on('change',function(e){
        const dataA = $(this).attr('data-a')
        
        const dataB = $("option:selected", this).data("b");
        const dataC = $("option:selected", this).data("c");
        
        $(`[data-b="${dataA}"]`).text(dataB)
        $(`[data-c="${dataA}"]`).text(dataC)
      })
    })
})

c'est tout.