使用jQuery生成的span不会自动对焦灯箱图像
使用jQuery生成的span不会自动对焦灯箱图像
提问于 2019-11-05 21:44:29
我有一个jQuery代码，它可以在下拉菜单更改时生成一个lightbox span。我的目标是在更改下拉菜单时显示图像，并能够单击图像，这样lightbox就会显示在屏幕上。
我遇到的问题是，当我更改下拉菜单时，图像会显示出来，但lightbox需要双击才能打开。
我认为这是因为下拉菜单有焦点，并且在可以点击之前，lightbox图像首先需要焦点。
一种解决方案是自动将焦点传递到lightbox，以便在下拉更改时，lightbox图像已经具有焦点，只需单击一次。然而，我希望我没有从下拉列表中自动失去焦点，因为可能会有用户想要通过键盘上/下箭头导航下拉列表。
我注意到的一件事是，如果我在HTML中使用span static，这个问题就不会发生。我的猜测是，它与焦点无关，而是动态创建的跨度。我还没有找到克服这个问题的解决方案，但我的想法已经用完了。谁有任何建议，我应该寻找什么，或手册，我可以查看，以进一步调整代码？
下面是一个简化的Codepen示例：https://codepen.io/speedygonzales77/pen/jOOZJLJ
if ( (preferred_facility == 'Classroom (laboratory)') && (label == 'BRYAN CAMPUS') ) {
$('.img_link').html('<a data-lightbox="blinn-gallery" data-title="" href="https://www.blinn.edu/_facilities-listing-demo/images/facilities/bryan/800/classroom-laboratory.jpg"><img alt="Classroom (laboratory)" class="img-thumbnail" height="200" src="https://www.blinn.edu/_facilities-listing-demo/images/facilities/bryan/800/classroom-laboratory.jpg" width="300"></a>');
}回答 1
Stack Overflow用户
发布于 2019-11-06 00:43:47
我选择更新src和href属性，而不是重写整个html https://codepen.io/phmmeyer/pen/xxxWOMg。
$( document ).ready(function() {
let brianCampusImages = [
{label:"student-center-f-140",image:"https://www.blinn.edu/_facilities-listing-demo/images/facilities/bryan/800/student-center-f-140.jpg"},
{label:"Classroom (laboratory)",image:"https://www.blinn.edu/_facilities-listing-demo/images/facilities/bryan/800/classroom-laboratory.jpg"}
]
$("#preferred_facility").on("change",function(){
let offset = parseInt($(this).val())
let zone = $("#blinn-gallery-zone");
$(zone)
.find("a")
.attr("href",brianCampusImages[offset].image);
$(zone)
.find("img")
.attr("src",brianCampusImages[offset].image)
.attr("alt",brianCampusImages[offset].label);
setTimeout(function(){
zone.css("display","inline-block")
},500);
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58712650
复制相关文章
相似问题
腾讯云开发者
