jQuery - не удалось показать/скрыть кнопки

Question

Я попытался добавить формы с помощью jQuery, и это удалось.
На этот раз я пытаюсь показать и скрыть некоторые кнопки (#remove_form, #add_form)
но всегда не работает :(

моих кодов JQuery (упоминаемый ответ this вопроса, в):

$(document).ready(function(){ 
    var index_num  = 1; 
    var max_num   = 7; 

$("#add_form").click(function(e){ 
    e.preventDefault(); 
    if(index_num < max_num){ 
     index_num++; 
     $("#event").each(function(){ 
       $(this).clone().insertAfter(this).attr("id","event" + index_num);    
       $("#add_form" + index_num).css("display","none"); 
       $("#remove_form" + index_num).css("display","inline"); 
      }); 
     } 
     }); 

     $("#remove_form" + index_num).click(function(e){ 
     e.preventDefault(); $(this).parent(".row collapse").remove(); index_num--; 
     }); 
    }); 

+) Я не написал код CSS-кода «#add_form». только это:

#remove_form{ 
    display: none; 
} 

HTML кода:

<div class="row collapse" id="event"> 
     <div class="small-2 large-2 columns"> 
      <h7>example</h7> 
     </div>  

     <div class="small-2 large-2 columns"> 
      <form>example</form> 
     </div> 

     <div class="small-2 large-2 columns"> 
      <form>example</form> 
     </div> 

     <div class="small-1 large-1 columns"> 
      <h7>example</h7> 
     </div> 

     <div class="small-2 large-2 columns"> 
      <form>example</form> 
     </div> 

     <div class="small-1 large-1 columns"> 
      <h7>example</h7> 
     </div> 

     <div class="small-2 large-2 columns"> 
      <button type="submit" class="button tiny alert" id="remove_form"></button> 
     </div> 

     <div class="small-2 large-2 columns"> 
      <button type="submit" class="button tiny" id="add_form"></button> 
     </div> 
    </div> 

+) HTML коды после нажатия кнопки '#add_form':

<div class="row collapse" id="event">...</div> 
<div class="row collapse" id="event7">...</div> 
<div class="row collapse" id="event6">...</div> 
<div class="row collapse" id="event5">...</div> 
<div class="row collapse" id="event4">...</div> 
<div class="row collapse" id="event3">...</div> 
<div class="row collapse" id="event2"> 

    ... 

     <div class="small-2 large-2 columns"> 
      <button type="submit" class="button tiny alert" id="remove_form"></button> 
     </div> 

     <div class="small-2 large-2 columns"> 
      <button type="submit" class="button tiny" id="add_form"></button> 
     </div> 
    </div> 

Как я могу решить эту проблему?

Answer 1

Вы должны использовать атрибут id только тогда, когда знаете, что ваш объект уникален.

Если у вас есть несколько id="event", тогда вам необходимо использовать class="event" и $(".event").each вместо $("#event").each.

Если мои предположения верны, вы пытаетесь создать копию формы мероприятия, когда вы нажимаете на #add_form button. Затем рекомендуется указать кнопку удаления в форме #event, чтобы каждый клон имел свою собственную кнопку удаления и одну кнопку добавления вне элемента #event.

Если вы так выразились, это не о Show/Hide, а о добавлении/удалении элементов DOM.

<div id="to_clone" style="display:none"> 
    <div class="row collapse" class="event"> 
     ... 

     <div class="small-2 large-2 columns"> 
      <button type="submit" class="button tiny alert" class="remove_form"></button> 
     </div> 
    </div> 
</div> 

<div id="events_container"> 
    <button type="submit" class="button tiny" id="add_form"></button> 
</div> 

Jquery

$('#add_form').click(function(){ 
    event=$("#to_clone").html(); 
    $(this).before(event); 
}); 

$(document).on('click', '.remove_form', function(){ 
    $(this).closest(".event").remove(); 
    return false; 
}); 

В случае, если вам интересно, как представить эти формы можно добавить функцию, которая перевести вклад в JSON.

function getEventsJson() 
{ 
    var json='['; 
    $('.event').each(function() 
    { 
     json=json+'{ "field1": "'+$(this).find('.field1class').val()+'","field2": "'+$(this).find('.field2class').val()+'"},'; 
    }); 
    json=json.replace(/,\s*$/, ""); 
    json=json+']' 
    return json; 
} 

или укажите для каждого события свою собственную форму и отправьте их по одному.

$('.event').each(function() 
{ 
    var form=$(this).find('form'); 
    $.ajax({ 
     type:"POST", 
     url: "/events", 
     data: { 
      'event' : form.serialize(), 
     }, 
     dataType: 'json', 
     success: function(data) { 

     }, 
     error: function(data){ 

     } 
    }); 
}