span, сгенерированный с помощью jQuery, не выполняет автофокусировку. - PullRequest
Новая
       5

span, сгенерированный с помощью jQuery, не выполняет автофокусировку.

2 голосов
/ 05 ноября 2019

У меня есть код jQuery, который генерирует интервал лайтбокса при изменении раскрывающегося меню. Моя цель состояла в том, чтобы показать изображение при изменении раскрывающегося меню и иметь возможность щелкнуть изображение, чтобы на экране отобразился лайтбокс.

Проблема, с которой я сталкиваюсь, заключается в том, что когдаЯ изменяю выпадающее меню, изображение показывает, но лайтбокс требует двойного щелчка, чтобы открыть.

Я подумал, что это потому, что раскрывающееся меню имеет фокус, а изображение лайтбокса должно быть сфокусировано в первую очередь, прежде чем его можно будет щелкнуть.

Одним из решений для меня является автоматическая передача фокуса налайтбокс, так что при изменении выпадающего списка изображение лайтбокса уже имеет фокус и требует только одного щелчка. Однако мне бы хотелось, чтобы я не терял фокус автоматически из раскрывающегося списка, поскольку могут быть пользователи, которые захотят перемещаться по раскрывающемуся списку с помощью стрелок вверх / вниз на клавиатуре.

Одна вещь, которую я заметил, заключается в том, чтоесли у меня есть статический span в HTML, эта проблема не возникает. Я предполагаю, что это не что-то с фокусом, а скорее промежуток, создаваемый на лету. Я не нашел решения, чтобы преодолеть это, но у меня заканчиваются идеи. У кого-нибудь есть какие-либо предложения относительно того, что мне следует искать, или руководств, на которые я могу обратить внимание для дальнейшей корректировки кода?

Вот упрощенный пример 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 Ответ

1 голос
/ 05 ноября 2019

Попробуйте мою вилку с ручкой youy: я решил обновить атрибуты 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);
});
...