如何用 javaScript 设置焦点？
How to set focus with 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 重命名为 class.
我将 #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>
我的问题是，在轮播中打开模态图像后，轮播不在焦点上。所以我不能使用左右键立即更改图像。有解决办法吗？使用 $('.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重命名为 class.我将
#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>