0

我有一个带有两张幻灯片的滑块，都包含相同的表格。当我从一个或另一个表单提交时，我想将该表单中的数据附加到包含该表单的幻灯片中。我只能从一个表单中获取数据，但我不能让附加只在一张幻灯片上工作。它总是增加两者。我不能只使用不同的 ID，因为我将使用 ajax 来更改基于向前或向后滑动导航的不可见幻灯片，因此滑块理论上是无限的。

这是我的 html（为便于查看而简化）：

<div class="flexslider">
        <ul class="slides">

            <li>
                <ul class="table">
                    <li>
                        <div class="clearfix">
                            <span class="nameSpan">Customer One</span>
                        </div>
                    </li>
                </ul>
                <form class="addNewCustomerForm" method="post">
                    <h1>Add New Customer</h1>
                    <input type="text" name="customerName" id="customerName">   
                    <input class="button" type="submit" value="Add New Customer">
                </form>
            </li>

            <li>
                <ul class="table">
                    <li>
                        <div class="clearfix">
                            <span class="nameSpan">Customer One</span>
                        </div>
                    </li>
                </ul>
                <form class="addNewCustomerForm" method="post">
                    <h1>Add New Customer</h1>
                    <input type="text" name="customerName" id="customerName">   
                    <input class="button" type="submit" value="Add New Customer">
                </form>
            </li>

        </ul>
    </div>

这是我的javascript（再次，简化）：

$(".addNewCustomerForm").submit(function(event) {
        $.post('addNewCustomer.asp', $(this).serialize(), function(result){
            $(".table", this).append(result);
            $(".newLine").slideDown();
        })
        return false;
    });
4

2 回答 2

0

那是因为$(".table", this)匹配两张幻灯片。

您可以通过给出每张幻灯片来解决这个问题id，例如id="slide1"

然后$("#slide1")根据提交的内容执行（或 slide2）。

您基本上需要将表单绑定到幻灯片，因为每张幻灯片都有自己的表单。

同样，您可能需要为$(".addNewCustomerForm"). 给每个表单一个唯一的 id 并将一个提交处理程序绑定到#slide1，另一个绑定到#slide2

于 2013-06-13T23:56:14.740 回答
0

你可能想要这样的东西

$(".addNewCustomerForm").submit(function(event) {
    var thisForm = $(this);
    $.post('addNewCustomer.asp', $(this).serialize(), function(result){
        thisForm.parent().find('.table').append(result);
        $(".newLine").slideDown();
    })
    return false;
});

（在本地测试过，先改了才发现）

于 2013-06-13T23:58:36.200 回答