[Rails 6] cocoon_ Fügen Sie dem hinzuzufügenden Formular ID- und Datenattribute hinzu

Entwicklungsumgebung

• Rails 6.0.3.4
• yarn 1.22.4

Inhaltsverzeichnis __1) So installieren Sie Cocoon 2) Formular dynamisch hinzufügen * Chikajika wird UP sein 3) Fügen Sie dem hinzuzufügenden Formular ID- und Datenattribute hinzu __

3) Fügen Sie dem hinzuzufügenden Formular ID- und Datenattribute hinzu

__ Ich denke, es ist schwierig, meinen Klassen- und ID-Namen so zu lesen, wie er ist. Deshalb verwende ich A, B und C, um das Verständnis zu erleichtern. __ __ Ich denke darüber nach, ein GIF-Bild zu veröffentlichen, wenn ich bald Lust dazu habe.

$(function() {
  //Vergessen Sie nicht zuerst die Definition.
  let index = 1;
  //Ich wusste nicht, welchen Kurs ich nehmen sollte, also habe ich es oft versucht.(.onegai)Ist ein Ausdruck dieses Herzens.
  //Infolgedessen in meinem Fall"Schaltfläche zum Hinzufügen"Wann"Das Kind, das Sie hinzufügen möchten"Ich habe einen Div gemacht, der sie alle einschließt und ihnen eine Klasse gegeben hat.
  $('.onegai')
     // 'cocoon:after-insert'Diese Veranstaltung ist Kimo. Es gibt andere Ereignisse, die vor dem Einfügen und vor / nach dem Löschen ausgeführt werden. Wenn Sie also interessiert sind, besuchen Sie bitte die offizielle Website.
    .on('cocoon:after-insert', function(e, insertedItem) {
      //Das Datenattribut wird dem eingefügten Element hinzugefügt. Wenn Sie die ID übergeben möchten.Bitte ändern Sie nach attr.
      //Beispiel).attr('id','index') **Index ist übrigens eine Variable, also ist alles in Ordnung.
      $(insertedItem).find('.class-a').attr('data-a', index);
      $(insertedItem).find('.class-b').attr('data-b', index);
      $(insertedItem).find('.class-c').attr('data-c', index);
      //Ich füge hier eins nach dem anderen hinzu.
      index = index+1

      //Wenn Sie ein Ereignis mit dem angegebenen Datenattribut auslösen möchten, können Sie es hier schreiben.
      //Dieses Mal, wenn eine Änderung in A auftritt, ist es ein Ereignis, einen Wert basierend auf A in den Text von B und C einzufügen.
      $('.class-a').on('change',function(e){
      //dataA Index(Nummer)Wird bekommen.
        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)
      })
    })
})

__ ↓ ↓ ↓ Es war schwer zu sehen, weil die Erklärung zu viel war, daher handelt es sich um eine Version, bei der die Erklärung gelöscht wurde. Wenn Sie verstehen können, indem Sie sich nur den Code ansehen, klicken Sie hier __

$(function() {
  //Vergessen Sie nicht zuerst die Definition.
  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)
      })
    })
})

das ist alles.