如何使用 javaScript 设置焦点？

问题描述

我的问题是在轮播中打开模态图像后，轮播不在焦点上。所以我不能使用左右键立即更改图像。有解决方案吗？使用 $('.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>

解决方法

在此之前，以下是“非直接相关” 更改：

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

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

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

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

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

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

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

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

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

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

$(".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