Question

我有以下代码可以使用：

$(document).ready(function() {
    var xhr = false;

    func_two();

    $('.button_one').click( function(event) {
        event.preventDefault(); 

        if ($("#textbox_one").val().length > 0) {
            func_one( $("#textbox_one").val() );
        } else {
            func_two();
        }
    });

    function func_one( phrase ) {
        xhr = $.ajax({
            type: 'POST',
            url: 'url here',
            data: '{phrase: "' + phrase + '"}',
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            success: function( data ) {
                $("#inner_div").empty();

                if( data.d[0] ) {
                    $.each( data.d, function( index, row ) {
                        $("#inner_div").append( "dynamic data goes here" );
                    });
                }
            }
        });
    }

    function func_two() {
        $('#inner_div').empty().append( "static data goes here" );
    }

});

这很好用，因为我直接指定哪些标签会产生效果以及哪些标签会受到影响。问题是这些div实际上是小部件或小工具，我需要允许用户在任何给定时间在屏幕上拥有多个这些小部件或小工具。当我尝试这个时，事情似乎完全错了，因为“我假设”使用控件和div的id。

所以，我尝试使用类，这似乎适用于测试代码：

$(this).closest('.main_div').find('.sub-div').text("data goes here");

但是，当我尝试将此代码应用于上面的原始代码时，它似乎不起作用。根据Chromium的开发人员工具，它给了我一个Cannot call method 'closest' of undefined。

我尝试过的代码似乎不起作用：

$(document).ready(function() {
    var xhr = false;

    func_two();

    $('.button_one').click( function(event) {
        event.preventDefault(); 

        if ($("#textbox_one").val().length > 0) {
            func_one( $(this), $("#textbox_one").val() );
        } else {
            func_two( $(this) );
        }
    });

    function func_one( that, phrase ) {
        xhr = $.ajax({
            type: 'POST',
            url: 'url here',
            data: '{phrase: "' + phrase + '"}',
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            success: function( data ) {
                $("#inner_div").empty();
                that.closest('.outer_div').find('.inner_div').empty();

                if( data.d[0] ) {
                    $.each( data.d, function( index, row ) {
                        that.closest('.outer_div').find('.inner_div').append( row.column );
                    });
                }
            }
        });
    }

    function func_two( that ) {
    that.closest('.outer_div').find('.inner_div').append( "static data goes here" );
    }

});

HTML看起来像这样

<div class="outer_div">

    <div class="inner_div">
        results go here
    </div>

    <div class="footer_div">
        <input type="button" class="button_one" />
    </div>

</div>

有人可以帮我将测试代码实现到原始代码中吗？

Answer 1

试试这个，我相信你的按钮正在被删除，并且不再有对该元素的引用。通过存储对目标子div的引用，THAT保持在你想要做的事情的上下文中：）

function func_one( that ) {
    xhr = $.ajax({
        type: 'POST',
        url: 'some url here',
        data: 'data to post here',
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        success: function( data ) {
            var column_elements = [];

            for(var i = 0; i < data.d.length; i++) {
                column_elements.push(data.d[i].column);
            }

            $('.sub_div', that.parents('.main_div:first')).text(column_elements.join(", "));
        }
    });
}

无法接近工作

1 个答案: