javascript - jQuery: Uncaught Error: Syntax error, unrecognized expression: (一堆照片标题文本数据)

Question

我正在尝试将 jQuery 数组中的文本添加到我的网页的给定点。该页面已设置为当我单击缩略图时，页面上会显示更大的图像和标题数据，但不会显示标题文本。 $(caption[this.id]).text().appendTo('#images'); 是错误的来源，尽管如果我用 做一个简单的 DOM.write (caption[this.id]).text()，文字会显示在页面上。

// App variables
    var filename = [];
    var caption = [];
    var id = [];
    var counter = 0;
    var thumbs = $([]);
    var images = $([]);

//Make an AJAX call to load the XML file data
    $.ajax({
        url: 'gallery.xml',
        dataType: 'xml',
        success: function (data) {
            $(data).find('gallery').each(function () {
                // Gather the image filenames
                $(data).find('image filename').each(function () {
                    counter++;

                    id.push(counter);
                    filename.push($(this).text());
                });
                //console.log(filename);
                // Gather the image captions
                $(data).find('image caption').each(function () {
                    caption.push($(this).text());
                });
            });
            // Run the thumbnail loading procedure when the AJAX call has completed
            loadThumbs();
            loadImages();
        },
        error: function () {
            // Failure alert if XML was not loaded
            alert("XML file couldn't load...");
        }
    });

    // Loop through filename list and create large image for each entry
    var loadImages = function() {
        $.each(filename, function (_, src) {
            images = images.add(
                $('<img />', {src: 'images/' + src, class: 'largeImage', height: '100px', width: '100px'})
            );
        });

        // Add first image to default
        $(images[0]).appendTo('#images')
    };

// Do some shit when image is clicked... 
    $( document ).on( "click", "img", function() {
        // Empty viewing DIV and create a new large-scale version of the image for viewing
        $('#images').empty();
        $(images[this.id]).appendTo('#images');

        //THIS IS WHERE ERROR COMES FROM
        // Add text to <span> to solve error?
        $(caption[this.id]).text().appendTo('#images');
    });

错误具体是:

如果这里看不懂，我可以添加所有的JS代码。提前致谢。

Answer 1

您正在将标题文本传递给 jQuery:

$(caption[this.id])

库正试图将其解析为 CSS 选择器，但它不能，因此会抛出错误。

你可以做几件事来让它发挥作用，你在评论中的建议很好:

$("<span/>", { text: caption[this.id] }).appendTo("#images");