Как вернуть контур фокуса на кнопку при нажатии кнопки закрытия

Question

У меня есть 2 кнопки и один слой (div), которым он может управлять, показать / скрыть.

Я пытаюсь сделать их после нажатия кнопки закрытия, которая находится в слое (div), фокус (контур) переместится к кнопке, на которой я нажал раньше.

Но я застрял в jquery, я не могу понять, какой из них неправильный.

Это то, что я пробовал до сих пор, пожалуйста, помогите.

$(function($) {

  $(".btn1, .btn2").on("click", function(){
    $(".layer").show().attr("tabindex","0").focus();;
  }); 
  $(".close").on("click", function(){
    $(".layer").hide();
    $(".btn1, .btn2").focus();
  }); 
  
});

.btn1 { background:red}
.btn2 { background:blue}
.layer { display:none; margin:50px 0 0 0;  border:1px solid #000; background:gray }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn1">btn1</button>
<button class="btn2">btn2</button>
 
<div class="layer">
  layer
  <button class="close">close</button>
</div>

Answer 1

Я пытаюсь сделать их после нажатия кнопки закрытия, которая находится в слое (div), фокус (контур) перемещается к кнопке, на которой я нажимал ранее.

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

Вот обновленный фрагмент:

$(function($) {
  var previouslyClickedButton;
  $(".btn1, .btn2").on("click", function(){
    $(".layer").show().attr("tabindex","0").focus();;
    previouslyClickedButton = this;
  }); 
  $(".close").on("click", function(){
    $(".layer").hide();
    $(previouslyClickedButton).focus();
  }); 
  
});

.btn1 { background:red}
.btn2 { background:blue}
.layer { display:none; margin:50px 0 0 0;  border:1px solid #000; background:gray }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn1">btn1</button>
<button class="btn2">btn2</button>
 
<div class="layer">
  layer
  <button class="close">close</button>
</div>

Answer 2

Вы также можете попробовать добавить новый класс. Давайте посмотрим на приведенный ниже рабочий пример.

$(function($) {

  $(".btn1, .btn2").on("click", function(){
  //instead of using body you can use any upper html element
    $('body').find('.setFocouss').removeClass("setFocouss");
    $(".layer").show().attr("tabindex","0").focus();
     $(this).addClass('setFocouss')

  }); 
  $(".close").on("click", function(){
    $(".layer").hide();
    $('.setFocouss').focus();
  }); 
  
});

.btn1 { background:red}
.btn2 { background:blue}
.layer { display:none; margin:50px 0 0 0;  border:1px solid #000; background:gray }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn1">btn1</button>
<button class="btn2">btn2</button>


 
<div class="layer">
  layer
  <button class="close">close</button>
</div>

Answer 3

Вам нужно сохранить кнопку, которая нажата в переменной, а затем применить фокус к этой кнопке.

$(function($) {
  var btn;
  $(".btn1, .btn2").on("click", function(){
    btn=$(this);
    $(".layer").show().attr("tabindex","0").focus();;
  }); 
  $(".close").on("click", function(){
    $(".layer").hide();
    btn.focus();
  }); 
  
});

.btn1 { background:red}
.btn2 { background:blue}
.layer { display:none; margin:50px 0 0 0;  border:1px solid #000; background:gray }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn1">btn1</button>
<button class="btn2">btn2</button>
 
<div class="layer">
  layer
  <button class="close">close</button>
</div>