jquery - 使用 jQuery 生成的跨度不会自动对焦灯箱图像

Question

我有一个 jQuery 代码，可以在下拉菜单更改时生成一个灯箱跨度。我的目标是在更改下拉菜单时显示图像，并能够单击图像，以便灯箱显示在屏幕上。

我遇到的问题是，当我更改下拉菜单时，图像显示，但灯箱需要双击才能打开。

我认为这是因为下拉菜单有焦点，灯箱图像需要先获得焦点，然后才能点击。

我的一个解决方案是自动将焦点传递给灯箱，这样在下拉更改时灯箱图像已经具有焦点并且只需要单击一次。但是，我希望我不会自动从下拉菜单中失去焦点，因为可能会有用户喜欢通过键盘向上/向下箭头导航下拉菜单。

我注意到的一件事是，如果我在 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>');


        }

Answer 1

试试我的笔叉: 我选择更新 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);
});