2

我有以下有效的代码：

$(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 实际上是小部件或小工具，我需要允许用户在任何给定时间在屏幕上拥有超过 1 个这些小部件或小工具。当我尝试这样做时，事情似乎完全出错了，因为“我假设”控件和 div 使用了 id。

因此，我尝试改用类，这似乎可以在此处的测试代码中使用：

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

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

我尝试过的似乎不起作用的代码如下所示：

$(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>

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

4

1 回答 1

1

试试这个，我相信您的按钮已被删除，并且不再引用该元素。通过存储对目标子 div 的引用，这将保留在您要执行的操作的上下文中:)

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(", "));
        }
    });
}
于 2012-05-08T15:14:34.420 回答