Hello, there is such a code

div class="hidden_edit_form" = render "answers/quick", answer: answer

It renders the form to edit the answer:

 = form_for answer do |f| = f.hidden_field :user_id, :value => current_user.id .field = f.label :text = f.text_area :text .actions = f.submit

It turns out that on the page there are for example 10 answers to a question. Initially they are hidden because of the class - hidden_edit_form. Under each answer there is an "Edit" button. How to make it so that when you click on this button, the editing form is opened only for this answer? Now this code:

 $(document).ready(function(){ $(".show_edit_form").click(function(){ $(".hidden_edit_form").show(); }); });

It displays all forms for all answers at once, and not just for the particular one selected. In short, it works for all forms hidden under the class hidden_edit_form

    1 answer 1

    There are several options:

    1. Use the default event parameter for the click () method. The event parameter has an event.target attribute.

       $(document).ready(function(){ $(".show_edit_form").click(function(event){ buttonEl = $(event.target); //ΠΊΠ½ΠΎΠΏΠΊΠ° Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π½Π°ΠΆΠ°Π»ΠΈ /* Ρ‚ΡƒΡ‚ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ ΠΊΠΎΠ΄ для нахоТдСния Π½ΡƒΠΆΠ½ΠΎΠΉ Ρ„ΠΎΡ€ΠΌΡ‹ рядом с Π½Π°ΠΆΠ°Ρ‚ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΊ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ (ΠΏΡ€ΠΈ условии Ρ‡Ρ‚ΠΎ Ρƒ Ρ„ΠΎΡ€ΠΌΡ‹ ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΎΠ±Ρ‰ΠΈΠΉ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒ): var form = buttonEl.siblings('hidden-edit-form'); */ form.show(); }); });

    2. Use unique classes for editing forms and buttons. Similar to the first one, using event.target to find out which button was pressed. Understand what form it refers to for example the form with an identifier 9 class="edit-button-9" . After that, find a form with class class="hidden-edit-form edit-form-9"

    PS class names are taken from the head. If you are a supporter of id then no one bothers to use them instead of class

    • it is unlikely that the pressed button is in an invisible form - Igor
    • @igor yes you are right. I did not think when I wrote an example, in principle, this does not change the essence, but I will correct it - muphblu
    • in jQuery handlers this also points to the element you need - Grundy
    • Thank! Understood) - Maxim Cherevatov