Jquery 在每个（）中引用$（this）

我试图用php生成一个表，并将其放置在div类为“accordian table”的位置。但是，当我运行下面的代码时，生成的html代码不会替换div。我假设我错误地引用了“.accordian table”，因为没有each语句的修改函数可以工作

function gettable () {
    $('.accordian-system').each( function() {

        var accordianSystem = $(this);

        var selectedID = accordianSystem.children('.selItems option:selected').val();

        $.ajax({
            type: "POST",
            url: 'ajax-gettable.php',
            data: { ID: selectedID },
            success: function(data) {
                accordianSystem.find('.accordian-table' ).replaceWith(data);
            }
        });


    } );
}

html结构是：

<div class="accordian-systems">
    <h3></h3>
    <div class="accordian-system">
        <select class="selItems"></select>
        <div class="accordian-table"></div>
    </div>
</div>

为此：

var selectedID = $('.accordian-system').children('.selItems option:selected').val();

如果拆下此支架及其闭合支架：

$('.accordian-system').each( function() {

---

此语句无法正常工作：

accordianSystem.children('.selItems option:selected').val()

这只会匹配满足该选择器的直接子级，但是

选项：selected

从来都不是直接子级（它是子级的子级），因此它不会匹配任何内容。我想你可能想要这个：

accordianSystem.find('.selItems option:selected').val()

如果可以选择多个元素，则必须进一步修改此代码，因为它可能返回一个值数组，而不仅仅是一个值

---

---

此外，路易斯的建议是合理的。不要假设代码正在做什么。设置断点，逐步检查它并查看它实际在做什么。如果未命中

成功

处理程序，则创建一个

错误

处理程序，并查看该处理程序的参数以了解失败的原因。按照当前编写代码的方式，您可能会将

null

作为

选择的edid

传递，直到您实现上述建议的更改。

以下是中的一个工作示例

HTML:

<div class="accordian-systems">
     <h3>Accordian Systems</h3>

    <div class="accordian-system">
        <select class="selItems">
            <option selected='selected'>1</option>
            <option>2</option>
        </select>
        <div class="accordian-table"></div>
    </div>
    <div class="accordian-system">
        <select class="selItems">
            <option selected='selected'>3</option>
            <option>4</option>
        </select>
        <div class="accordian-table"></div>
    </div>
</div>

var accordianSystems = $('div.accordian-system');
accordianSystems.each(function (index, element) {
    var selectedItemText = $(element).find('.selItems option:selected').text();
    setTable(element, selectedItemText);
});
accordianSystems.find('.selItems').change(function () {
    setTable($(this).parent(), $(this).val());
});

function setTable(accordianSystem, id) {
    $(accordianSystem).children('div.accordian-table').text('Selected value: ' + id);
    //Here you would otherwise call your ajax function...
}

---

当

select

元素的值更改时，将使用

select

元素的值发出ajax请求。ajax请求的响应将div替换为

.accordian表

类如果再次更改select的值会怎么样？没有可替换的div我将提供一个解决方案，该解决方案在第一次和随后的时间都应该有效

$(function() {
    $('div.accordian-system').children('select.selItems').on('change', gettable);
});

function gettable () {
    var accordianSystem = $(this).parent();
    var selectedID = this.value;
    $.ajax({
        type: "POST",
        url: 'ajax-gettable.php',
        data: { ID: selectedID },
        success: function(data) {
            var repElem = accordianSystem.children('.accordian-table' ) || $(this).next();
            repElem.replaceWith(data);
        }
    });
}

简单演示了当

select

元素的值更改时，会发出ajax请求。您可以查看调试工具的“网络”选项卡，您应该会看到如下内容：

Remote Address:162.243.204.190:80
Request URL:http://fiddle.jshell.net/fiddleyetu/wKA2g/show/ajax-gettable.php
Request Method:POST
Status Code:404 NOT FOUND
Chrome/35.0.1916.153 Safari/537.36
X-Requested-With:XMLHttpRequest
Form Dataview sourceview URL encoded
ID:50

---

不要假设，调试你的代码，让我们知道它是否进入成功函数，也要创建错误回调，这样当你遇到其他问题时你就知道了。你知道ajax调用是否真的返回了什么吗？请显示控制台输出的数据。以“on”结束，而不是“an”。添加同样适用于问题的代码。谢谢，这是一个已修复的问题。我尝试了此方法，但无法成功实现此功能。另外，“gettable”需要“（）”。

（）

将使它立即执行。让我把一个JSFIDLE放在一起，向您展示它触发ajax调用。。。这意味着您可能需要在服务器上工作，以返回一些内容。@spooky655，请查看我的更新答案，请随意使用演示…：（只有我们无法获得

ajax响应

！是的，当手风琴加载后，我想首先向每个选项卡添加相应的表。@spooky655更新了答案，这应该可以工作…）@spooky655我更新了示例，我向控制台写入代码，而不是调用ajax函数，但您只需交换该部分即可。

Remote Address:162.243.204.190:80
Request URL:http://fiddle.jshell.net/fiddleyetu/wKA2g/show/ajax-gettable.php
Request Method:POST
Status Code:404 NOT FOUND
Chrome/35.0.1916.153 Safari/537.36
X-Requested-With:XMLHttpRequest
Form Dataview sourceview URL encoded
ID:50