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 code：

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

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){

        }
    });
}

jQuery - 显示/隐藏按钮失败

1 个答案: