Question

我需要选择一些选项（三个多选菜单），而不是通过单击按钮来调用函数，检索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>');
                        };

            });

        };

在这里输入代码

Answer 1

函数sito中的变量epoca，tipo和filtra()以及函数xmlParser()中的变量不在同一范围内。

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

要解决此问题，您需要将它们放在同一范围内。

您可以将AJAX处理程序xmlParser()放入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>');
                };
            });
        }
    });
};

或将您的变量分配移至xmlParser()函数

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>');
        };
    });
};

要调试代码，您应该使用console.log(variable);来检查实际执行的内容以及变量是否具有它们应该具有的值。

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

onclick函数检索和过滤xml无法正常工作

1 个答案: