Question

我正在使用javascript构建应用程序，通过AWS api从S3中提取图像。我使用jquery_ui为app ui添加select功能。目前我可以根据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,console,output

Answer 1

如果选择器字符串包含任何元字符，则必须使用两个反斜杠字符对其进行转义。元字符是！“＃$％＆amp;'（）* +，。/ :;＆lt; =＆gt;？@ [] ^`{|}〜

例如，如果您的id值为“image_6.jpg”，则您的选择器必须为“＃image_6 \\。jpg”。

Jquery UI：选择一个可选择的

1 个答案: