Javascript jqueryui：选择一个可选的

我正在使用javascript构建一个应用程序，通过AWSAPI从S3中提取图像。我使用jquery_ui向应用程序ui添加选择功能。目前，基于jquery ui文档，我可以毫无问题地选择通过s3在我的图库中加载的图像。但是，我有一个侧栏导航面板，允许我选择文件名，我希望库中的图像也显示为选中

我尝试过$image-id.addClass'ui-selected'和同一概念的各种其他迭代，但什么都没有发生

有没有关于我做错了什么的线索？我不能自称是JS专家

HTML:

显示图像的相关JS：

// Display images from s3
$(document).ready(function(){
function listImages(){
    s3.listObjects(function (err, data) {
        if (err) {
            $('#image-status').html('Could not load objects from S3');
        } else {
            $('#image-status').html('<h3>Loaded ' + data.Contents.length + ' images from ' + bucket + '.</h3>');
            for (var i = 0; i < data.Contents.length; i++) {
                $('#selectable-images').append("<li><img id=" + data.Contents[i].Key + " src='" + origin + bucket + "/" + data.Contents[i].Key + "'>" + "</img></li>");
            }
        }
    });
}

// Selectable images
$( "#selectable-images" ).selectable({
    filter: "img",
    selected: function(event, ui) {
// Get image properties
        if($(ui.selected).attr('id') != null) {
            var file = $(ui.selected).attr('id');
            selected_image = {Key: file};
        }

// Display image properties
        s3.headObject(selected_image, function(err, data) {
            if(err) {
                console.log(err, err.stack)
            } else {
                properties = data
            }
            $('#properties').html("<li>Key: " + $(ui.selected).attr('id') + "</li> " + "<li>Content Type: " + properties.ContentType + "</li> " + "<li>Last Modified: " + properties.LastModified + "</li>")
        });
    }
});
});

---

JSBin:

如果选择器字符串包含任何元字符，则必须使用两个反斜杠字符对其进行转义。元字符是！$%&'*+，./：@[]^`{124;}~

---

例如，如果您的id值是image_6.jpg，那么您的选择器将需要是image_6\\.jpg。

是否设置过图像状态？最初？不，这只是一个空div，有关系吗？我一点也不想与之互动。Mby不，只是这太少了，无法与之合作。我能补充什么帮助吗？我又抛出了一些代码。本质上，我只是从s3中提取图像。使用jQueryUI使其可选择。现在，我只是尝试在编写完整功能之前，使用浏览器控制台根据id向添加一个类。但是，无法将类添加到中。只是我看不到将所述类添加到图像中的代码。

// Display images from s3
$(document).ready(function(){
function listImages(){
    s3.listObjects(function (err, data) {
        if (err) {
            $('#image-status').html('Could not load objects from S3');
        } else {
            $('#image-status').html('<h3>Loaded ' + data.Contents.length + ' images from ' + bucket + '.</h3>');
            for (var i = 0; i < data.Contents.length; i++) {
                $('#selectable-images').append("<li><img id=" + data.Contents[i].Key + " src='" + origin + bucket + "/" + data.Contents[i].Key + "'>" + "</img></li>");
            }
        }
    });
}

// Selectable images
$( "#selectable-images" ).selectable({
    filter: "img",
    selected: function(event, ui) {
// Get image properties
        if($(ui.selected).attr('id') != null) {
            var file = $(ui.selected).attr('id');
            selected_image = {Key: file};
        }

// Display image properties
        s3.headObject(selected_image, function(err, data) {
            if(err) {
                console.log(err, err.stack)
            } else {
                properties = data
            }
            $('#properties').html("<li>Key: " + $(ui.selected).attr('id') + "</li> " + "<li>Content Type: " + properties.ContentType + "</li> " + "<li>Last Modified: " + properties.LastModified + "</li>")
        });
    }
});
});