[JAVA] [Rails] Informationen zur Produktbearbeitungsfunktion der Furima-App (Vorschau-Bearbeitung / DB-Update)

Einführung

Ich heiße Kusano. In diesem Beitrag geht es um die Funktion zur Bearbeitung von Klon-App-Produkten auf der EC-Site für den freien Markt, die vom Team der Programmierschule entwickelt wurde. Der Text ist schlecht, weil er ein Memo für mich ist, aber ich hoffe, er wird Anfängern so viel wie möglich helfen. Wie der Titel schon sagt, handelt der Inhalt von der Vorschau-Bearbeitung und der DB-Aktualisierung. Ich denke, es gibt viele unreife Punkte. Bitte weisen Sie auf Mängel hin. Ich werde es von Zeit zu Zeit verbessern. Übrigens habe ich die Schule selbst abgeschlossen und werde sie als Rückblick auf das, was ich gelernt habe, veröffentlichen.

Fertiges Produkt

Produktbearbeitungsbildschirm (Vorschau des Bildteils)

Produktbearbeitungsbildschirm (Kategorieabschnitt)

Produktbearbeitungsbildschirm (Verkaufsgebühr / Gewinnabteilung)

Übergangsbildschirm bei erfolgreicher Aktualisierung

Montagevorgang

1. Routing bearbeiten

• Routeneinstellung "Update_done" (Übergangsbildschirm bei erfolgreicher Aktualisierung)

2. Controller-Bearbeitung

--edit Methodeneinstellung

• Methodeneinstellung aktualisieren --Fehlerbehandlung --Lösche Bild --update_dane Methodeneinstellung

3. Bearbeiten / Erstellen anzeigen

• Vorschau-Bild anrufen
• Anpassen von Kategorieaufrufen --Transitionsbildschirm bei erfolgreicher Aktualisierung

4. JS-Bearbeitung

• Generieren und löschen Sie Vorschaubilder und Eingabe-Tags
• Anzeige von Verkaufsgebühren und Gewinnen

1. Routing bearbeiten

Update_done Generiert eine Route. Dies ist das Routing, um den Übergangsbildschirm anzuzeigen, wenn die Aktualisierung erfolgreich ist.

config/routes.rb 

  resources :items do
    resources :comments,  only: [:create, :destroy]
    resources :favorites, only: [:create, :destroy]
    collection do
      get 'get_category_children', defaults: { fomat: 'json'}
      get 'get_category_grandchildren', defaults: { fomat: 'json'}
      get 'search'
      get 'post_done'
      get 'delete_done'
      get 'detail_search'
      get 'update_done' #Füge das hinzu
    end
  end

2. Controller-Bearbeitung

Die Beschreibung des diesmal bearbeiteten Controllers lautet wie folgt.

app/controller/items_controller.rb 

class ItemsController < ApplicationController
before_action :category_parent_array, only: [:new, :create, :edit]
before_action :set_item, only: [:show, :edit, :update, :destroy]
before_action :show_all_instance, only: [:show, :edit, :destroy]

#Unterlassung

  def edit
    grandchild = @item.category
    child = grandchild.parent
    if @category_id == 46 or @category_id == 74 or @category_id == 134 or @category_id == 142 or @category_id == 147 or @category_id == 150 or @category_id == 158
    else
     @parent_array = []
     @parent_array << @item.category.parent.parent.name
     @parent_array << @item.category.parent.parent.id
    end
     @category_children_array = Category.where(ancestry: child.ancestry)
     @child_array = []
     @child_array << child.name
     @child_array << child.id

     @category_grandchildren_array = Category.where(ancestry: grandchild.ancestry)
     @grandchild_array = []
     @grandchild_array << grandchild.name
     @grandchild_array << grandchild.id

  end

  def update
    if item_params[:images_attributes].nil?
      flash.now[:alert] = 'Aktualisieren nicht möglich [Bitte fügen Sie ein oder mehrere Bilder ein]'
      render :edit
    else
      exit_ids = []
      item_params[:images_attributes].each do |a,b|
        exit_ids << item_params[:images_attributes].dig(:"#{a}",:id).to_i
      end
      ids = Image.where(item_id: params[:id]).map{|image| image.id }
      delete__db = ids - exit_ids
      Image.where(id:delete__db).destroy_all
      @item.touch
      if @item.update(item_params)
        redirect_to  update_done_items_path
      else
        flash.now[:alert] = 'Konnte nicht aktualisiert werden'
        render :edit
      end
    end
  end

  def update_done
    @item_update = Item.order("updated_at DESC").first
  end

#Unterlassung

  private
  def item_params
    params.require(:item).permit(:name, :item_explanation, :category_id, :item_status, :auction_status, :delivery_fee, :shipping_origin, :exhibition_price,:brand_name, :days_until_shipping, images_attributes: [:image, :_destroy, :id]).merge(user_id: current_user.id)
  end

  def set_item
    @item = Item.find(params[:id])
  end

  def category_parent_array
    @category_parent_array = Category.where(ancestry: nil).each do |parent|
    end
  end

  def show_all_instance
    @user = User.find(@item.user_id)
    @images = Image.where(item_id: params[:id])
    @images_first = Image.where(item_id: params[:id]).first
    @category_id = @item.category_id
    @category_parent = Category.find(@category_id).parent.parent
    @category_child = Category.find(@category_id).parent
    @category_grandchild = Category.find(@category_id)
  end
end

Stellen Sie zunächst die Bearbeitungsmethode ein. Da die in anderen Methoden verwendete Instanzvariable verwendet wird, gibt es einen Aufruf von before_action zum Refactoring. Die verwendeten Instanzvariablen sind wie folgt. (2) Ein Array, dem der Name und die ID der übergeordneten Kategorie zugewiesen sind ③ Kategorie Alle untergeordneten Kategorien im Modell ④ Ein Array, dem der Name und die ID der untergeordneten Kategorie zugewiesen sind ⑤ Kategorie Alle Enkelkategorien im Modell ⑥ Ein Array, dem der Name und die ID der Enkelkategorie zugewiesen sind ⑦ Anwendbare Produktinformationen ⑧ Kategorie Alle übergeordneten Kategorien im Modell ⑨ Bild des entsprechenden Produkts ⑩ Category_id des entsprechenden Produkts (Zahlenwert des Enkels)

app/controller/items_controller.rb 

class ItemsController < ApplicationController
before_action :category_parent_array, only: [:new, :create, :edit]
before_action :set_item, only: [:show, :edit, :update, :destroy]
before_action :show_all_instance, only: [:show, :edit, :destroy]

#Unterlassung

  def edit
    #▼ ① Ordnen Sie hier der Variablen die Kategorie Kind / Enkel des entsprechenden Produkts zu
    grandchild = @item.category
    child = grandchild.parent
    if @category_id == 46 or @category_id == 74 or @category_id == 134 or @category_id == 142 or @category_id == 147 or @category_id == 150 or @category_id == 158
    else
     #② ▼ Ersetzen Sie den Namen und die ID der übergeordneten Kategorie in einem Array
     @parent_array = []
     @parent_array << @item.category.parent.parent.name
     @parent_array << @item.category.parent.parent.id
    end
     #③ ▼ Ordnen Sie Instanzvariablen alle untergeordneten Kategorien zu
     @category_children_array = Category.where(ancestry: child.ancestry)
     #④ ▼ Ersetzen Sie den Namen und die ID der untergeordneten Kategorie in einem Array
     @child_array = []
     @child_array << child.name #Holen Sie sich den Namen / die ID basierend auf der in ⑤ generierten Variablen
     @child_array << child.id
     #⑤ ▼ Ordnen Sie Instanzvariablen alle Enkelkategorien zu
     @category_grandchildren_array = Category.where(ancestry: grandchild.ancestry) 
     #⑥ ▼ Ersetzen Sie den Namen und die ID der Enkelkategorie in einem Array
     @grandchild_array = []
     @grandchild_array << grandchild.name #Holen Sie sich den Namen / die ID basierend auf der in ⑤ generierten Variablen
     @grandchild_array << grandchild.id
  end
  end

#Unterlassung

  private
  def item_params
    params.require(:item).permit(:name, :item_explanation, :category_id, :item_status, :auction_status, :delivery_fee, :shipping_origin, :exhibition_price,:brand_name, :days_until_shipping, images_attributes: [:image, :_destroy, :id]).merge(user_id: current_user.id)
  end

  def set_item
    @item = Item.find(params[:id])                                #⑦ Ordnen Sie der Instanzvariablen die entsprechenden Produktinformationen zu
  end

  def category_parent_array
    @category_parent_array = Category.where(ancestry: nil)        #⑧ Ordnen Sie alle übergeordneten Kategorien Instanzvariablen zu
  end

  def show_all_instance
    @user = User.find(@item.user_id)
    @images = Image.where(item_id: params[:id])                   #⑨ Ersetzen Sie das Image des entsprechenden Produkts durch die Instanzvariable
    @images_first = Image.where(item_id: params[:id]).first
    @category_id = @item.category_id                              #⑩ Holen Sie sich die Kategorie-ID aus dem Datensatz des entsprechenden Produkts und weisen Sie sie der Instanzvariablen zu (die zu diesem Zeitpunkt erhaltene ID ist die Enkel-Kategorie-ID).
    @category_parent = Category.find(@category_id).parent.parent                    
    @category_child = Category.find(@category_id).parent
    @category_grandchild = Category.find(@category_id)
  end

Wenn Sie jedes klassifizieren und neu anordnen, sieht es wie folgt aus.

** Zum Anzeigen von Produktinformationen als Anfangswert im Eingabe-Tag ** ⑦ Anwendbare Produktinformationen ** Zur Anzeige des Produktbildes als Anfangswert in der Vorschau ** ⑨ Bild des entsprechenden Produkts ** Zum Anzeigen der Kategorie als Anfangswert im Eingabe-Tag **

• Informationen zum Abrufen der Namen und IDs von Eltern, Kindern und Enkelkindern und deren Verwendung in collection_select auf der Ansichtsseite. ⑩ Category_id des entsprechenden Produkts (Zahlenwert des Enkels) (2) Ein Array, dem der Name und die ID der übergeordneten Kategorie zugewiesen sind ④ Ein Array, dem der Name und die ID der untergeordneten Kategorie zugewiesen sind ⑥ Ein Array, dem der Name und die ID der Enkelkategorie zugewiesen sind

• Informationen, die von collection_select auf der Ansichtsseite beim erneuten Eingeben verwendet werden ⑧ Kategorie Alle übergeordneten Kategorien im Modell ③ Kategorie Alle untergeordneten Kategorien im Modell ⑤ Kategorie Alle Enkelkategorien im Modell

Als nächstes folgt die Einstellung der Aktualisierungsmethode. Wie beim Bearbeiten heißen die Produktinformationen, die Sie aktualisieren möchten, before_action.

app/controller/items_controller.rb 

class ItemsController < ApplicationController
before_action :set_item, only: [:show, :edit, :update, :destroy]

#Unterlassung

  def update
    # ①
    if item_params[:images_attributes].nil?
      flash.now[:alert] = 'Aktualisieren nicht möglich [Bitte fügen Sie ein oder mehrere Bilder ein]'
      render :edit
    else
    # ②
      exit_ids = []
      item_params[:images_attributes].each do |a,b|
        exit_ids << item_params[:images_attributes].dig(:"#{a}",:id).to_i
      end
      ids = Image.where(item_id: params[:id]).map{|image| image.id }
    # ③
      delete__db = ids - exit_ids
      Image.where(id:delete__db).destroy_all
    # ④
      @item.touch
      if @item.update(item_params)
        redirect_to  update_done_items_path
      else
        flash.now[:alert] = 'Konnte nicht aktualisiert werden'
        render :edit
      end
    end
  end


#Unterlassung

  private
  def item_params
    params.require(:item).permit(:name, :item_explanation, :category_id, :item_status, :auction_status, :delivery_fee, :shipping_origin, :exhibition_price,:brand_name, :days_until_shipping, images_attributes: [:image, :_destroy, :id]).merge(user_id: current_user.id)
  end

  def set_item
    @item = Item.find(params[:id])
  end
end

In dieser Beschreibung wird zunächst die Fehlerbehandlung mit einer if-Anweisung beschrieben, damit sie nicht aktualisiert werden kann, wenn kein Bild vorhanden ist. Die Beschreibung von item_params [: images_attributes] .nil? Überprüft, ob die Bilder in params leer sind. Wenn die .nil? -Methode leer ist, wird sie ture und das Rendern kehrt zum Bearbeitungsbildschirm zurück, und flash.now [: alert] zeigt eine Fehlermeldung an.

①

    if item_params[:images_attributes].nil?
      flash.now[:alert] = 'Aktualisieren nicht möglich [Bitte fügen Sie ein oder mehrere Bilder ein]'
      render :edit
    else

② bewegt sich, wenn es in der if-Anweisung früher falsch wird. Der beschriebene Inhalt ist die ID des Bildes, das eingegeben wird, wenn exit_ids die Aktualisierungstaste drückt, und die IDs des Bildes vor der Aktualisierung, die in der Datenbank gespeichert sind. exit_Generieren Sie ein Array mit dem Namen ids and item_params[:images_attributes]Da ich den im mehrdimensionalen Array enthaltenen ID-Wert abrufen möchte, erweitern Sie den Schlüssel und den Wert in der Reihenfolge mit jeder Anweisung. ((|a,b|→ a Schlüssel, b Wert) Die Dig-Methode wird verwendet, um den Wert aus dem mehrdimensionalen Array abzurufen. item_params [: images_attributes](mehrdimensionales Array) .dig (: "# {a (übergeordneter Schlüssel)}",: id (untergeordneter Schlüssel)) .to_i (numerischen Wert festlegen) Extrahieren Sie die ID und weisen Sie sie dem Array zu Ich werde. Holen Sie sich dann für IDs den entsprechenden Datensatz vor dem Update aus der Datenbank, extrahieren Sie die ID mit der Map-Methode und ersetzen Sie sie.

②

      exit_ids = []
      item_params[:images_attributes].each do |a,b|
        exit_ids << item_params[:images_attributes].dig(:"#{a}",:id).to_i
      end
      ids = Image.where(item_id: params[:id]).map{|image| image.id }

Wenn Sie den Inhalt von item_params [: images_attributes] mit binding.pry überprüfen, wird er übrigens wie folgt angezeigt. Ich habe mit einem Bild auf die Schaltfläche "Aktualisieren" geklickt. Der Wert, den Sie exit_ids in ② zuweisen möchten, ist der Wert "322" im untergeordneten Array.

Terminal (Startkonsole)

[1] pry(#<ItemsController>)> item_params[:images_attributes]
=> <ActionController::Parameters {"0"=><ActionController::Parameters {"id"=>"322"} permitted: true>} permitted: true>

In (3) werden die exit_ids und ids verglichen, und wenn das auf dem Bearbeitungsbildschirm als Anfangswert aufgerufene Bild aus der Datenbank gelöscht wird, werden die entsprechenden Daten in der Datenbank gelöscht. Sie können nur die gelöschten IDs belassen, indem Sie exit_ids von den IDs abziehen. Weisen Sie es delete__db zu, rufen Sie den darauf basierenden Datensatz aus der Datenbank ab und löschen Sie ihn mit der Methode destroy_all. Der Grund für die Verwendung von _all ist, dass sogar mehrere Datensätze gelöscht werden können.

③

      delete__db = ids - exit_ids
      Image.where(id:delete__db).destroy_all

In ④ werden die Produktinformationen aktualisiert. Wenn es durch Fehlerbehandlung der if-Anweisung aktualisiert werden kann, wechselt es zu dem Bildschirm, der den Aktualisierungserfolg über die Route update_dine anzeigt. Wenn es nicht aktualisiert wird, kehrt der Bildschirm zum Bearbeitungsbildschirm zurück und eine Fehlermeldung wird angezeigt. @ Item.touch, das in der ersten Zeile beschrieben wird, dient zum Aktualisieren, einschließlich der Spalte update_at (Aktualisierungsdatum und -uhrzeit) der Elementtabelle. Der Grund für das Schreiben wird später erklärt.

④

      @item.touch
      if @item.update(item_params)
        redirect_to  update_done_items_path
      else
        flash.now[:alert] = 'Konnte nicht aktualisiert werden'
        render :edit
      end

Als nächstes wird die Methode update_done festgelegt. Auf dem Bildschirm wird ein Link zur aktualisierten Produktdetailseite eingerichtet, der über den Erfolg der Aktualisierung informiert. Die Spalte update_at (Datum und Uhrzeit der Aktualisierung) der Elementtabelle wurde aktualisiert, indem @ item.touch zuvor in ④ der Aktualisierungsmethode beschrieben wurde. Verwenden Sie die Bestellmethode und die erste Methode, um das erste Element in der Spalte update_at in absteigender Reihenfolge @item_update zuzuweisen.

app/controller/items_controller.rb 

  def update_done
    @item_update = Item.order("updated_at DESC").first
  end

3. Bearbeiten anzeigen

Da es lange dauern wird, bis alle Beschreibungen enthalten sind, werde ich sie hier weglassen.

haml:app/views/items/_form_edit.html.haml 

#▼ Beschreibung zum Produktbild
.new__page__header
  = link_to image_tag("logo/logo.png ", alt: "logo"), root_path
= form_for @item do |f|
  = render 'layouts/error_messages', model: f.object
  .name__field#1
    .form__label
      .lavel__name
Ausstellungsbild
      .lavel__Required
        [Verpflichtend]
  #image-box-1{class:"#{@images.last.id}"}
#▼ ① Anzeige des Vorschaubildes
    - @images.each do |img|
      .item-image{id:img.id}
        = image_tag(img.image.url,{width:"188",height:"180"})
        .item-image__operetion
          .item-image__operetion--edit__delete__versteckt löschen
    %label.img-label{for: "img-file"}
      #image-box__container{class:"item-num-#{@images.length}"}
        #append-js-edit
          = f.fields_for :images do |image|
            .js-file_group{"data-index" => "#{image.index}"}
              = image.file_field :image, type: 'file', value:"#{image.object.id}",style: "",  id:"img-file", class:'js-file-edit',name: "item[images_attributes][#{@item.images.count}][image]", data:{index:""}
        %i.fas.fa-camera

#Unterlassung

#▼ Beschreibung der Kategorie
  .append__category
    .category
      =f.collection_select :category_id, @category_children_array, :id, :name, {selected:@child_array}, {class:"serect_field"}
    - if @category_id == 46 or @category_id == 74 or @category_id == 134 or @category_id == 142 or @category_id == 147 or @category_id == 150 or @category_id == 158
      .category__grandchild#children_wrapper
        =f.collection_select :category_id, @category_grandchildren_array, :id, :name, {},{selected:@grandchild_array, id:"child__category",class:"serect_field"}
    - else
      .category__child#children_wrapper
        =f.collection_select :category_id, @category_children_array, :id, :name, {},{selected:@child_array, id:"child__category", class:"serect_field"}
      .category__grandchild#grandchildren_wrapper
        =f.collection_select :category_id, @category_grandchildren_array, :id, :name, {selected:@grandchild_array}, {class:"serect_field"}

#Kürzung

Das Vorschaubild wird mit der folgenden Beschreibung angezeigt. .item-image__operetion - edit__delete__hidden Der Punkt ist die Beschreibung, die vor dem Löschen verborgen ist. Ich werde beim Bearbeiten von js erklären.

①

    - @images.each do |img|
      .item-image{id:img.id}
        = image_tag(img.image.url,{width:"188",height:"180"})
        .item-image__operetion
          .item-image__operetion--edit__delete__versteckt löschen

Die Kategorien werden in der folgenden Beschreibung angezeigt. Die bedingte Verzweigung wird in der if-Anweisung ausgeführt, wenn kein Enkelkind vorhanden ist und wenn ein Enkelkind vorhanden ist. Der Inhalt {} wird im Tag collection_select beschrieben, dies wird jedoch in Bezug auf die Reihenfolge der Argumente beschrieben, wenn die Optionen beim Zuweisen der ID beschrieben werden.

Kategorie

  .append__category
    .category
      =f.collection_select :category_id, @category_children_array, :id, :name, {selected:@child_array}, {class:"serect_field"}
    - if @category_id == 46 or @category_id == 74 or @category_id == 134 or @category_id == 142 or @category_id == 147 or @category_id == 150 or @category_id == 158
      .category__grandchild#children_wrapper
        =f.collection_select :category_id, @category_grandchildren_array, :id, :name, {},{selected:@grandchild_array, id:"child__category",class:"serect_field"}
    - else
      .category__child#children_wrapper
        =f.collection_select :category_id, @category_children_array, :id, :name, {},{selected:@child_array, id:"child__category", class:"serect_field"}
      .category__grandchild#grandchildren_wrapper
        =f. :category_id, @category_grandchildren_array, :id, :name, {selected:@grandchild_array}, {class:"serect_field"}

Die folgende Beschreibung ist die Ansichtsdatei des Übergangsbildschirms, wenn die Aktualisierung erfolgreich ist.

haml:app/views/items/_form_edit.html.haml 

= render "top/header"
.done#fullsize
  .done__title
Produktinformationen wurden aktualisiert
  .done__backlink
    = link_to 'Gehen Sie zurück zur obersten Seite', root_path, class: 'link'
  .done__backlink
    = link_to 'Suchen Sie nach aktualisierten Produkten', item_path(@item_update), class: 'link'
  .done__backlink
    = link_to 'Siehe die Liste der angebotenen Produkte', users_path, class: 'link'
= render "top/lower-photo"
= render "top/footer"
= render "top/btn"

4. JS-Bearbeitung

Bearbeiten Sie die js-Datei wie folgt.

app/assets/javascript/edit_items.js 

$(function(){
  var dataBox = new DataTransfer();
  var file_field = document.getElementById('img-file')
  $('#append-js-edit').on('change','#img-file',function(){
    $.each(this.files, function(i, file){
      //Lesen Sie das von readAsDataURL von FileReader angegebene File-Objekt
      var fileReader = new FileReader();
      //Datei zum DataTransfer-Objekt hinzufügen
      dataBox.items.add(file)
      var num = $('.item-image').length + 1 + i
      var aaa = $('.item-image').length + i
// ①
      var image_id = Number($('#image-box-1').attr('class'))
      var append_div_count = Number($('div[id=1]').length) 
      var noreset_id = image_id + append_div_count

      fileReader.readAsDataURL(file);
     //Wenn die Anzahl der Bilder 10 erreicht, löschen Sie das Feld, wenn es überschritten wird
      if (num == 10){
        $('#image-box__container').css('display', 'none')
      }
      //Speichern Sie nach Abschluss des Ladevorgangs die URL der Datei in src
      fileReader.onloadend = function() {
        var src = fileReader.result
// ②
        var html= `<div class='item-image' data-image="${file.name}" data-index="${aaa}" id="${noreset_id-1}">
                    <div class=' item-image__content'>
                      <div class='item-image__content--icon'>
                        <img src=${src} width="188" height="180" >
                      </div>
                    </div>
                    <div class='item-image__operetion'>
                      <div class='item-image__operetion--edit__delete__file'>Löschen</div>
                    </div>
                  </div>`
        const buildFileField1 = (num)=> {
// ③
          const html = `<div  class="js-file_group" data-index="${num}" id=1>
                          <input class="js-file-edit" type="file"
                          name="item[images_attributes][${append_div_count+9}][image]"
                          id="img-file" data-index="${num}value="${noreset_id}" >
                        </div>`;
          return html;
        }
        $('.js-file-edit').removeAttr('id');
        //image_box__Fügen Sie HTML vor dem Containerelement ein
        $('.img-label').before(html);
        $('#append-js-edit').append(buildFileField1(num));
      };
      //image-box__Ändern Sie die Containerklasse und die Größe der Dropbox mit CSS.
      $('#image-box__container').attr('class', `item-num-${num}`)
    });
  });
// ④
  //Löschen Sie das Feld, wenn 10 Blätter registriert wurden
  $(document).ready(function(){
    var image_num = $('.item-image').length
    if (image_num==10){
      $('#image-box__container').css('display', 'none')
    }
  });
// ⑤
  $(document).ready(function(){
    $('.js-file-edit').removeAttr('id');
    var num = $('.item-image').length - 1
    var image_id = Number($('#image-box-1').attr('class'))
    var append_div_count = Number($('div[id=1]').length) 
    var noreset_id = image_id + append_div_count
    const buildFileField = (num)=> {
      const html = `<div  class="js-file_group" data-index="${num}" id=1>
                      <input class="js-file-edit" type="file"
                      name="item[images_attributes][100][image]"
                      id="img-file" data-index="${num}" value="${noreset_id}" >
                    </div>`;
      return html;
    }
    $('#append-js-edit').append(buildFileField(num));
  });
// ⑥
  $(document).on("click", '.item-image__operetion--edit__delete__hidden', function(){
    //Zum Löschen auf Vorschauelement drücken
    var target_image = $(this).parent().parent();
    //Ruft den Dateinamen des Vorschaubilds ab, das zum Löschen gedrückt wurde
    var target_id = $(target_image).attr('id');
    var target_image_file = $('input[value="'+target_id+'"][type=hidden]');
    //Vorschau löschen
    target_image.remove()
    target_image_file.remove()
    //image-box__Ändern Sie die Klasse des div-Tags, das die Containerklasse enthält, jedes Mal, wenn Sie sie löschen
    var num = $('.item-image').length
    $('#image-box__container').show()
    $('#image-box__container').attr('class', `item-num-${num}`)
  })
// ⑦
  $(document).on("click", '.item-image__operetion--edit__delete__file', function(){
    //Zum Löschen auf Vorschauelement drücken
    var target_image = $(this).parent().parent();
    var target_id = Number($(target_image).attr('id'));
    //Ruft den Dateinamen des Vorschaubilds ab, das zum Löschen gedrückt wurde
    var target_image_file = $('#append-js-edit').children('div').children('input[value="'+target_id+'"][type=file]');
    //Vorschau löschen
    target_image.remove()
    target_image_file.remove()
    //image-box__Ändern Sie die Klasse des div-Tags, das die Containerklasse enthält, jedes Mal, wenn Sie sie löschen
    var num = $('.item-image').length
    $('#image-box__container').show()
    $('#image-box__container').attr('class', `item-num-${num}`)
  })

Rufen Sie die zuletzt gespeicherte Bild-ID in der Beschreibung in der ersten Zeile ab und weisen Sie sie der Variablen image_id zu. Zählen Sie in der zweiten Zeile die Anzahl der Tags, denen id = 1 im div in der Ansichtsdatei zugewiesen wurde, und weisen Sie sie der Variablen append_div_count zu. Fügen Sie es in der dritten Zeile hinzu, Weisen Sie der Variablen noreset_id zu. noreset_id dient zum Festlegen der Wertoption des Eingabe-Tags, das beim Hinzufügen eines Bildes neu angezeigt wird. Verwenden Sie diese Option, um den Löschvorgang auszuführen. Stellen Sie außerdem die Option id ein, um das div-Tag zu löschen, das das übergeordnete Element des Vorschaubilds ist, und streben Sie denselben numerischen Wert an. (②)

①

      var image_id = Number($('#image-box-1').attr('class'))
      var append_div_count = Number($('div[id=1]').length) 
      var noreset_id = image_id + append_div_count

Die folgende Beschreibung ist der HTML-Code des Vorschaubilds, das durch Auslösen eines Ereignisses generiert wird, wenn die Bilddaten in das Eingabe-Tag eingegeben werden.

 var html= `<div class='item-image' data-image="${file.name}" data-index="${aaa}" id="${noreset_id-1}">
                    <div class=' item-image__content'>
                      <div class='item-image__content--icon'>
                        <img src=${src} width="188" height="180" >
                      </div>
                    </div>
                    <div class='item-image__operetion'>
                      <div class='item-image__operetion--edit__delete__file'>Löschen</div>
                    </div>
                  </div>`

 const html = `<div  class="js-file_group" data-index="${num}" id=1>
                          <input class="js-file-edit" type="file"
                          name="item[images_attributes][${append_div_count+9}][image]"
                          id="img-file" data-index="${num}value="${noreset_id}" >
                        </div>`;

  //Löschen Sie das Feld, wenn 10 Blätter registriert wurden
  $(document).ready(function(){
    var image_num = $('.item-image').length
    if (image_num==10){
      $('#image-box__container').css('display', 'none')
    }
  });

  $(document).ready(function(){
    $('.js-file-edit').removeAttr('id');
    var num = $('.item-image').length - 1
    var image_id = Number($('#image-box-1').attr('class'))
    var append_div_count = Number($('div[id=1]').length) 
    var noreset_id = image_id + append_div_count
    const buildFileField = (num)=> {
      const html = `<div  class="js-file_group" data-index="${num}" id=1>
                      <input class="js-file-edit" type="file"
                      name="item[images_attributes][100][image]"
                      id="img-file" data-index="${num}" value="${noreset_id}" >
                    </div>`;
      return html;
    }
    $('#append-js-edit').append(buildFileField(num));
  });

  $(document).on("click", '.item-image__operetion--edit__delete__hidden', function(){
    //Zum Löschen auf Vorschauelement drücken
    var target_image = $(this).parent().parent();
    //Ruft den Dateinamen des Vorschaubilds ab, das zum Löschen gedrückt wurde
    var target_id = $(target_image).attr('id');
    var target_image_file = $('input[value="'+target_id+'"][type=hidden]');
    //Vorschau löschen
    target_image.remove()
    target_image_file.remove()
    //image-box__Ändern Sie die Klasse des div-Tags, das die Containerklasse enthält, jedes Mal, wenn Sie sie löschen
    var num = $('.item-image').length
    $('#image-box__container').show()
    $('#image-box__container').attr('class', `item-num-${num}`)
  })

  $(document).on("click", '.item-image__operetion--edit__delete__file', function(){
    //Zum Löschen auf Vorschauelement drücken
    var target_image = $(this).parent().parent();
    var target_id = Number($(target_image).attr('id'));
    //Ruft den Dateinamen des Vorschaubilds ab, das zum Löschen gedrückt wurde
    var target_image_file = $('#append-js-edit').children('div').children('input[value="'+target_id+'"][type=file]');
    //Vorschau löschen
    target_image.remove()
    target_image_file.remove()
    //image-box__Ändern Sie die Klasse des div-Tags, das die Containerklasse enthält, jedes Mal, wenn Sie sie löschen
    var num = $('.item-image').length
    $('#image-box__container').show()
    $('#image-box__container').attr('class', `item-num-${num}`)
  })

$(function() {
  var input=$("#item_exhibition_price"),fee=1/10,feeIncluded=$("#sales_commission_price");
  input.on("input",function(){
    feeIncluded.text(Math.floor($(this).val() * fee).toLocaleString());
    if($('sales_commission_price').present!=0){
      sales_commission_price.append("Kreis");
    }
  });
  $(document).ready(function(){
    feeIncluded.text(Math.floor($("#item_exhibition_price").val() * fee).toLocaleString());
    if($('sales_commission_price').present!=0){
      sales_commission_price.append("Kreis");
    }
  });
});
  
$(function() {
  var input=$("#item_exhibition_price"),tax=9/10,salesProfit=$("#sales_profit_proce");
  input.on("input",function(){
    salesProfit.text(Math.ceil($(this).val() * tax).toLocaleString());
    if($('sales_commission_price').present!=0){
      sales_profit_proce.append("Kreis");
    }
  });
  $(document).ready(function(){
    salesProfit.text(Math.ceil($("#item_exhibition_price").val() * tax).toLocaleString());
    if($('sales_commission_price').present!=0){
      sales_profit_proce.append("Kreis");
    }
  });
});