在 each() 中引用 $(this)

Question

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

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 = accordianSystem.children('.selItems option:selected').val();

用这个：

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

如果删除它及其右大括号：

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

Answer 1

这个语句不能正常工作：

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

这只会匹配满足该选择器的直接子代，但 option:selected 绝不是直接子代（它是子代的子代），因此它不会匹配任何东西。我想你可能想要这个：

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

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

---

另外，Luis 的建议是合理的。不要假设你的代码在做什么。设置断点，单步执行，看看它实际上在做什么。如果它没有击中您的success 处理程序，则创建一个error 处理程序并查看它的参数以了解它失败的原因。按照您当前编写代码的方式，您可能会将null 作为selectedID 传递，直到您实施上述建议的更改。

Answer 2

这是JSFiddle中的一个工作示例

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>

JS：

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

Answer 3

当select 元素的值发生变化时，将使用select 元素的值发出一个ajax 请求。来自 ajax 请求的响应将 div 替换为 .accordian-table 类。 如果再次更改 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);
        }
    });
}

This Demo 只是演示了当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