Jquery UI:选择一个可选择的
Jquery UI: Selecting a selectable
我正在使用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"
相关文章:
- 按照选项卡索引的顺序循环一个jQuery选择
- 创建一个可重用的RequireJs库
- 在另一个可观察量完成后触发第二个表单提交单击
- 在另一个可浏览的应用程序中包含已绑定的文件
- 为什么在fabricjs中可选择的不适用于一组圆
- 从另一个日期选择器中选择另一个值后,获取日期选择器的起始值
- Onsen UI在点击时显示一个日期选择器
- 如何在引导日期选取器中限制可选择的日期范围
- 只允许一个可放置区域 jquery 拖放
- JavaScript拖放 - 防止元素拖放到另一个可拖放的元素中
- 使用rxjs创建一个可观察的对象,该对象稍后将连接到web套接字
- Datatablesjquery插件-限制可选择的行数
- 草皮缓冲区和一个可拖动的标记
- 如何提供日期选择器,该日期选择器包含一个可选择的日期、月份和年份选项
- 将可选择的复选框数量限制为三个(不包括一个)
- 如何使用可拖动和可选择的JQuery拖动一个或多个项目到一个元素
- 在jQueryUI中只选择一个可选项
- 为什么添加rect然后设置它的左和顶部会导致一个可选择的'ghost'请保持原来的位置
- Jquery UI:选择一个可选择的
- Jquery UI拖拽选择项目是一个可拖拽的