Jquery UI:选择一个可选择的

Jquery UI: Selecting a selectable

本文关键字:一个 可选择 UI 选择 Jquery      更新时间:2023-09-26

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

我已经尝试了$(#image-id).addClass('ui-selected')和相同概念的各种其他迭代,但没有发生任何事情。

有什么提示我做错了吗?我不能说我是JS专家。

HTML:

<div class="right-container">
        <div class="sidebar">
            <input type="file" id="file-chooser" name="files[]" multiple />
            <button id="upload-button">Upload</button>
            <div id="results"></div>
            <ul id="objects"></ul>
        </div>
        <div class="navigation">
            <div id="item-status"></div>
            <ul id="selectable-items">
            </ul>
        </div>
    </div>
    <div class="main-container">
        <div class="content">
            <div id="image-status"></div>
            <ul id="selectable-images">
            </ul>
        </div>
        <div id="details">
            <ul id="properties"></ul>
        </div>
    </div>

相关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: http://jsbin.com/fodovoko/2/edit?html、css js,控制台输出

如果选择器字符串包含任何元字符,则必须用两个反斜杠字符进行转义。元字符是! " # $ %和 ;'()*+,./:;& lt; => ?@[]^`{|}~

例如,如果你的id值是"image_6.jpg",你的选择器就需要是"#image_6''.jpg"