Question

我有一个带有两张幻灯片的滑块，两张幻灯片都包含相同的格式。当我从一个或另一个表单提交时，我想将该表单中的数据附加到包含表单的幻灯片中。我只能从一个表单中获取数据，但我只是无法将附加内容仅用于一张幻灯片。它总是会增加两者。我不能只使用不同的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;
    });

Answer 1

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

您可以通过提供每张幻灯片和id来解决此问题，例如id="slide1"

然后执行$("#slide1")（或slide2），具体取决于提交的内容。

你基本上需要 bind 表单到幻灯片，因为每张幻灯片都有自己的表单。

同样，您可能需要为$(".addNewCustomerForm")执行类似的操作。为每个表单指定一个唯一ID，并将一个提交处理程序绑定到#slide1，将另一个绑定到#slide2

Answer 2

你可能想要这样的东西

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

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

两个表单，两个div，只将一个表单的数据附加到一个div？

2 个答案: