Ajax onclick函数检索和筛选xml无效

我需要在多选菜单中选择一些选项，然后通过单击按钮调用函数，检索xml文件，根据所选选项过滤结果并显示它们。这是一项非常简单的任务，但我不擅长编码。我可以在加载页面时检索和过滤xml文件，但是如果我将加载和过滤函数与onclick事件关联，那么它就不起作用。我必须知道如何解决这个问题，但我认为这对一个程序员来说应该很容易。下面是外部javascript代码：

function filtra(){

    var sito = $('#sito option:selected').val();
    var epoca = $('#epoca option:selected').val();
    var tipo = $('#tipo option:selected').val();

            $.ajax({
                type: 'GET',
                url: 'data.xml',
                dataType: 'xml',
                success: xmlParser

            });
        };



        function xmlParser(xml) {
            $(xml).find('reperto').each(function(){

                    if (($(this).find("sito").attr('id') == sito || $(this).find("sito").text() == sito) && ($(this).find("epoca").attr('id') == epoca || $(this).find("epoca").text() == epoca) && ($(this).find("tipo").attr('id') == tipo || $(this).find("tipo").text() == tipo)) {

                    $('#container').append('<div align="left"><img src="reperti/' + $(this).find("foto").text() + '" width="200" height="225"></div>');
                    $('#container').append('<div><p>' + $(this).find("testo").text() + '</p></div>');
                        };

            });

        };

在此处输入代码

函数filter中的变量sito、epoca和tipo以及函数xmlParser中的变量不在同一范围内

xmlParser中的变量sito、epoca和tipo是您的下拉菜单，而不是您在下拉菜单中选择的值。 这是因为它们与变量名具有相同的id

要解决这个问题，您需要将它们放在相同的范围内

您可以将AJAX处理程序xmlParser放入filtra函数中

要调试代码，应使用console.logvariable；检查实际执行的内容以及变量是否具有它们应该具有的值

---

您可以在web开发控制台中查看该输出。您可以在Chrome和Firefox中使用F12打开它。

它是如何工作的？这意味着什么都没有发生，我不明白为什么。如果我在加载页面时使用$document.ready检索并过滤xml文件，那么它就完美地工作了：我可以显示我想要显示的数据。如果使用onclick事件调用同一个函数来检索xml，那么什么也不会发生。我仍然不知道为什么非常感谢你，你救了我一天，也感谢你对如何调试我的代码的建议。现在的问题是每次单击函数filtra时，清理结果并使用新变量执行另一次搜索。。。再次感谢@如果我的回答对你有帮助，你应该接受。

function filtra() {
    var sito = $('#sito option:selected').val();
    var epoca = $('#epoca option:selected').val();
    var tipo = $('#tipo option:selected').val();

    $.ajax({
        type: 'GET',
        url: 'data.xml',
        dataType: 'xml',
        success: function(xml) {
            $(xml).find('reperto').each(function() {
                if (($(this).find("sito").attr('id') == sito || $(this).find("sito").text() == sito) && ($(this).find("epoca").attr('id') == epoca || $(this).find("epoca").text() == epoca) && ($(this).find("tipo").attr('id') == tipo || $(this).find("tipo").text() == tipo)) {
                    $('#container').append('<div align="left"><img src="reperti/' + $(this).find("foto").text() + '" width="200" height="225"></div>');
                    $('#container').append('<div><p>' + $(this).find("testo").text() + '</p></div>');
                };
            });
        }
    });
};

function filtra() {
    $.ajax({
        type: 'GET',
        url: 'data.xml',
        dataType: 'xml',
        success: xmlParser
    });
};

function xmlParser(xml) {
    var sito = $('#sito option:selected').val();
    var epoca = $('#epoca option:selected').val();
    var tipo = $('#tipo option:selected').val();

    $(xml).find('reperto').each(function() {
        if (($(this).find("sito").attr('id') == sito || $(this).find("sito").text() == sito) && ($(this).find("epoca").attr('id') == epoca || $(this).find("epoca").text() == epoca) && ($(this).find("tipo").attr('id') == tipo || $(this).find("tipo").text() == tipo)) {
            $('#container').append('<div align="left"><img src="reperti/' + $(this).find("foto").text() + '" width="200" height="225"></div>');
            $('#container').append('<div><p>' + $(this).find("testo").text() + '</p></div>');
        };
    });
};