javascript - 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--;
      });
  }); 

+) 我没有写“#add_form”按钮的CSS代码。就是这样:

#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>

+) 点击“#add_form”按钮后的 HTML 代码:

<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 元素之外的添加按钮。

如果你这么说，那就不是显示/隐藏而是添加/删除 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>

查询

$('#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){

        }
    });
}