如何用javascript设置焦点？

Question

我的问题是，我在轮播中打开模态图像后，轮播没有焦点。所以我不能马上使用左右键来改变图像。有解决方案吗？使用 $('.carousel').flickity().focus(); 我只能将焦点设置到第二个（最后一个）轮播。谢谢！亲切的问候，八月

//carousel and image captions
$('.carousel-container').each( function( i, container ) {
  var $container = $( container );

  var $carousel = $container.find('.carousel').flickity({
    // cellSelector: 'img',
    // fullscreen: true,
    wrapAround: true,
    imagesLoaded: true,
    percentPosition: false
  });

  var $captionTitle = $container.find('.captionTitle');
  var $caption = $container.find('.caption');
  // Flickity instance
  var flkty = $carousel.data('flickity');

  $carousel.on( 'select.flickity', function() {
    // set image caption using img's alt
    $captionTitle.text($(flkty.selectedElement).find('img').attr('title'))
    $caption.text($(flkty.selectedElement).find('img').attr('alt'))
  });
});

//modal
// create references to the modal...
var modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
var images = document.getElementsByTagName('img');
// the image in the modal
var modalImg = document.getElementById("img01");
// and the caption in the modal
// var captionText = document.getElementById("caption");

// Go through all of the images with our custom class
for (var i = 0; i < images.length; i++) {
  var img = images[i];
  // and attach our click listener for this image.
  img.onclick = function(evt) {
    console.log(evt);
    modal.style.display = "block";
    modalImg.src = this.src;
    //??
    $('.carousel').flickity().focus();
  }
}
//close
var span = document.getElementsByClassName("modal")[0];

span.onclick = function() {
  modal.style.display = "none";
  modal.focus();
}

* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  text-decoration: none;
}

.carousel-headline {
    text-align: center;
    width: 100%;
    margin-bottom:10px;
}

hr {
    margin-top: 50px;
    width: 0px;
}

main {
    max-width: 1080px;
    width:100%;
    margin: auto;
}

.carousel-cell {
  width: 100%;
  padding-left: 10px;
  padding-right: 10px;
  /* center images in cells with flexbox */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.carousel.is-fullscreen .carousel-cell {
  height: 100%;
}

.carousel-cell img {
  max-width: 100%;
  max-height: 500px;
}

.flickity-button {
  color: #bbb !important;
}

.flickity-button:hover {
  color: #333 !important;
}

.zoom-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
}

.caption, .captionTitle {
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  white-space:pre-wrap;
}

.captionTitle {
  margin-top: 30px;
  font-weight: bold;
}

.flickity-page-dots {
  scale: 0.75;
}

/* Modal  */

#modalImg {
  cursor: pointer;
}

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  /* padding-top: 100px; */
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: white;
  /* Fallback color */
  background-color: white;
  /* Black w/ opacity */
  cursor: pointer;
}

.modal-content {
  max-height: 1200px;
  width: auto;
  margin: 0 auto;
  display: block;
}

.close {
  text-transform: uppercase;
  color: #000;
  background-color: #fff;
  border: 0;
  padding: 4px 6px;
  line-height: 1;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}

.close:hover,
.close:focus {
  color: #bbb;
}

<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">

<div class="carousel-container">
  <p class='carousel-headline'>Carousel 1</p>
  <div class="carousel">
    <div class="carousel-cell">
      <img id="modalImg" src="https://picsum.photos/720/540/?image=517" title="Titel 1" alt="Text 1" />
    </div>
    <div class="carousel-cell">
      <img id="modalImg" src="https://picsum.photos/540/720/?image=696" title="Titel 1.1" alt="Text 1.1" />
    </div>
  </div>
  <p class="captionTitle"></p>
  <p class="caption"></p>
</div>

<hr>

<div class="carousel-container">
  <p class='carousel-headline'>Carousel 2</p>
  <div class="carousel">
    <div class="carousel-cell">
      <img id="modalImg" src="https://picsum.photos/720/540/?image=517" title="Titel 2" alt="Text 2" />
    </div>
    <div class="carousel-cell">
      <img id="modalImg" src="https://picsum.photos/540/720/?image=696" title="Titel 2.1" alt="Text 2.1" />
    </div>
  </div>
  <p class="captionTitle"></p>
  <p class="caption"></p>
</div>

<div id="myModal" class="modal">
<span class="close">close</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>

Answer 1

在此之前，以下是“非直接相关”的变化：

• 您多次使用了 ID modalImg... 用于在轮播图片上设置 cursor:pointer。
  id 必须是唯一的。所以我将它重命名为 sliderImg 为一个类。

• 我将 #img01 更改为更有意义的名称：#modalImage。

然后很遗憾，这个插件documentation 需要更新...我尝试的许多事件都没有提供所有陈述的论点。

在事件处理程序的范围内，this 的可访问属性没有得到很好的记录。

在这种情况下，我想出了这两个有用的：

• this.element: 是滑块元素
• this.selectedElement: 是活动的还是“选定的”幻灯片

所以我使用on 对象来设置您需要的事件回调。
只有模态的“关闭”跨度需要单独的处理程序。

所以现在，在staticClick 上，模式打开了，令人惊讶的是，滑块上的focus 并没有丢失。您可以使用键盘箭头。在change 上，您只需要获取“选定图像”src 即可更新模态图像。

现在，如果单击模态图像...滑块上的focus 丢失了...但是请查看$("#myModal").on("click", ...) 以保持焦点。 ;)

有关解决方案的更多具体细节，请参阅下面的 cmets。

$(".carousel-container").each(function (i, container) {
  $(container)
    .find(".carousel")
    .flickity({
      // cellSelector: 'img',
      // fullscreen: true,
      wrapAround: true,
      imagesLoaded: true,
      percentPosition: false,

      // Event handlers
      on: {
        select: function (index) {
          let $container = $(this.element).parent();

          let $captionTitle = $container.find(".captionTitle");
          let $caption = $container.find(".caption");
          let $currentImage = $(this.selectedElement).find("img");

          // Set the captions
          $captionTitle.text($currentImage.attr("title"));
          $caption.text($currentImage.attr("alt"));
        },

        change: function (index) {
          if ($("#myModal").is(":visible")) {
            let $selectedEl = $(this.selectedElement).find("img");
            $("#modalImage").attr("src", $selectedEl.attr("src"));
          }
        },

        staticClick: function (event, eventAgain, selectedCell) {
          // On click on a slider image, open the modal with the right image
          // Also save the slider element to a data attribute of the modal
          // so that on modal close, the slider will be focussed
          var $activeImage = $(selectedCell).find("img");
          $("#modalImage").attr("src", $activeImage.attr("src"));
          $("#myModal").data("sliderEl", this.element).show();
        }
      }
    });

  // Modal close
  $("span.close").on("click", function () {
    
    // Close the modal
    $("#myModal").hide();

    // Focus the slider from which the modal open was triggered
    $($("#myModal").data("sliderEl")).focus();
  });
  
  // Keep the focus on the slider
  // if a click is made on the modal image
  $("#myModal").on("click", function(e){
    if($(e.target).is(".close")){return}
    $($(this).data("sliderEl")).focus();
  })
  
});

* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  text-decoration: none;
}

.carousel-headline {
  text-align: center;
  width: 100%;
  margin-bottom: 10px;
}

hr {
  margin-top: 50px;
  width: 0px;
}

main {
  max-width: 1080px;
  width: 100%;
  margin: auto;
}

.carousel-cell {
  width: 100%;
  padding-left: 10px;
  padding-right: 10px;
  /* center images in cells with flexbox */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.carousel.is-fullscreen .carousel-cell {
  height: 100%;
}

.carousel-cell img {
  max-width: 100%;
  max-height: 500px;
}

.flickity-button {
  color: #bbb !important;
}

.flickity-button:hover {
  color: #333 !important;
}

.zoom-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
}

.caption,
.captionTitle {
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  white-space: pre-wrap;
}

.captionTitle {
  margin-top: 30px;
  font-weight: bold;
}

.flickity-page-dots {
  scale: 0.75;
}

/* Modal  */

.sliderImg {  /* CHANGED */
  cursor: pointer;
}

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  /* padding-top: 100px; */
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: white;
  /* Fallback color */
  background-color: white;
  /* Black w/ opacity */
  cursor: pointer;
}

.modal-content {
  max-height: 1200px;
  width: auto;
  margin: 0 auto;
  display: block;
}

.close {
  text-transform: uppercase;
  color: #000;
  background-color: #fff;
  border: 0;
  padding: 4px 6px;
  line-height: 1;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}

.close:hover,
.close:focus {
  color: #bbb;
}

<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">

<div class="carousel-container">
  <p class='carousel-headline'>Carousel 1</p>
  <div class="carousel">
    <div class="carousel-cell">
      <img class="sliderImg" src="https://picsum.photos/720/540/?image=517" title="Titel 1" alt="Text 1" />
    </div>
    <div class="carousel-cell">
      <img class="sliderImg" src="https://picsum.photos/540/720/?image=696" title="Titel 1.1" alt="Text 1.1" />
    </div>
  </div>
  <p class="captionTitle"></p>
  <p class="caption"></p>
</div>

<hr>

<div class="carousel-container">
  <p class='carousel-headline'>Carousel 2</p>
  <div class="carousel">
    <div class="carousel-cell">
      <img class="sliderImg" src="https://picsum.photos/720/540/?image=517" title="Titel 2" alt="Text 2" />
    </div>
    <div class="carousel-cell">
      <img class="sliderImg" src="https://picsum.photos/540/720/?image=696" title="Titel 2.1" alt="Text 2.1" />
    </div>
  </div>
  <p class="captionTitle"></p>
  <p class="caption"></p>
</div>

<div id="myModal" class="modal">
  <span class="close">close</span>
  <img class="modal-content" id="modalImage">
  <div id="caption"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>

CodePen