Question

我有一个表单，当单击“添加字段”按钮时，使用javascript动态添加字段。此外，用户可以通过按“删除字段”按钮删除字段。如果删除某个字段，则会隐藏该字段，并将该字段的名为“_destroy”的隐藏字段设置为true。我正在努力使用户可以添加最多3个字段。到目前为止，我有以下代码：

function add_fields(link, association, content) {
    if($(".order_number").length > 2){
        alert("A schedule can have a maximum of 3 tasks.")
    }else{
        //add field code here
    }
}

这是html：

<tr class="add-task">
    <td><input id="schedule_tasks_attributes_1394554386530_title" 
           class="field" type="text" 
           name="schedule[tasks_attributes][1394554386530][title]" />
    </td>
    <td>
        <input id="schedule_tasks_attributes_1394554386530_order_number" 
           class="order_number" type="hidden" 
           name="schedule[tasks_attributes][1394554386530][order_number]" 
           value="4" />       
        <div id="remove_schedule_field_employer">
             <input id="schedule_tasks_attributes_1394554386530__destroy" 
               type="hidden" value="false" 
               name="schedule[tasks_attributes][1394554386530][_destroy]" />
             <a onclick="remove_fields(this); return false;" href="#"></a>
        </div>
    </td>
</tr>

问题是即使隐藏了要销毁的字段，订单号仍然存在，因此即使隐藏字段也会出现警报消息。如何使警报消息仅在可见字段的长度大于3时发生？我已经尝试了jquery .is（'：visible'）方法，但它返回一个布尔值，而不是字段，所以我不能在它上面使用.length。

更新：

也许这会有所帮助。这是删除该字段的js。 'fieldo'是围绕该领域的类。

function remove_fields(link) {
    $(link).prev("input[type=hidden]").val("1");
    $(link).closest(".fieldo").hide();
}

Answer 1

实际上它在jQuery中有点bug，问题是元素类名中的下划线。

尝试将其删除see demo：

$(".ordernumber:visible").length

Answer 2

尝试：

function add_fields(link, association, content) {
    if($(".order_number:visible").length > 2){
        alert("A schedule can have a maximum of 3 tasks.")
    }else{
        //add field code here
    }
}

这将更改jQuery选择器以选择具有显示设置为“block”的类.order_number的元素

Answer 3

使用.filter(':visible')代替.is(':visible')。

仅在可见字段上使用jquery .length

3 个答案: