所以我正在创建一个随机字符串值:
var randomString = function(stringLength) {
var i = 0;
stringLength = stringLength || 10;
var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz';
var randomString = '';
for (i = 0; i < stringLength; i += 1) {
var rNum = Math.floor(Math.random() * chars.length);
randomString += chars.substring(rNum, rNum + 1);
}
return randomString;
};
将其与一个窗格上的列表元素相关联:
var addUniqueId = function($thumbnail) {
var random = randomString(10);
$thumbnail.attr('id', 'rand-' + random);
};
然后克隆它并将该列表元素向右移动:
var cloneImage = function($thumbnail) {
addUniqueId($thumbnail);
var $lastImgAdded = $('.js-gallery-edit-pane li').last();
var span = $('<span />');
span.addClass('x').text('x');
var $clone = $thumbnail.clone(true, true).appendTo($('.js-gallery-edit-pane')).prepend(span).hide().fadeIn(200).unbind('click');
bindRemoveHandler($clone);
};
然后我在左边的列表元素中添加一个叠加层,将其“灰化”出来。一切都在这一点上起作用。
从那里,用户可以通过单击图像上的“X”来删除右侧最近克隆的项目。这样可以正常工作并删除最近克隆的图像,但是,找不到原始叠加层。它应该与随机字符串值相关联,所以我只是在$('.js-gallery-select-pane').find('#rand-' + string).find('.overlay').remove();
中寻找它,但由于某种原因它没有找到它......
知道为什么吗?
答案 0 :(得分:4)
如果您在代码中添加alert(string)
,则会看到该字符串已包含rand-
,因此在您的选择器中只需执行以下操作:
$('.js-gallery-select-pane').find('#' + string).find('.overlay').remove();
这是工作JSFiddle
答案 1 :(得分:0)
您有两个元素集合,其中包含ID对。
但是有三个问题。前两个问题就在这里..
您正在使用克隆'rand-etctcetc'的完整ID 然后再将rand-添加到'rand-rand-etcetcetc'然后将其用作选择器。 $( '兰特,兰特etcetcetc')。相反,我改变它只是将必要的#添加到id。您还需要删除js-gallery-editing类,以便将内容添加回右侧的列表中。
var bindRemoveHandler = function($thumbnail) {
$thumbnail.on('click', function() {
$(this).fadeOut(200, function() {
var string = $(this).attr('id');
$('.js-gallery-select-pane').find('#' + string).removeClass('js-gallery-editing').find('.overlay').remove();
$(this).remove();
updatePictureCount();
});
});
};
你可以在这里停下来但是,你也有不同的问题。 ID属性旨在是唯一的。尝试使用自定义属性,Jquery属性等于选择器。您想要的查询看起来像这样..
$('.js-gallery-select-pane').find('[pairid="' + string +'"]');
在这里,有一个小提琴:http://jsfiddle.net/s3dCB/