Question

我是jquery的新手，现在遇到了一些麻烦。

我有几个按钮，单击按钮后，将显示layer（div）。单击“确定”按钮后，该层将焦点对准单击时的按钮。

这是我到目前为止尝试过的方法，但是在焦点事件上遇到了麻烦。我需要添加什么代码？

请帮助。

$(function($) {
  $('.btn').click(function() { 
    $('.popup').show().attr('tabindex', '0').focus();
  });
  $('.layer_close').click(function() {
    $('.popup').hide().removeAttr('tabindex');
  });
});

.popup {  display: none}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn" id="start1">start date</button>
<button class="btn" id="end1">end date</button><br>
 
<button class="btn" id="start2">start date</button>
<button class="btn" id="end2">end date</button><br>
  
<button class="btn" id="start3">start date</button>
<button class="btn" id="end3">end date</button><br>
 

<div class="popup">
	<input type="radio" id="n1" name="rr"><label for="n1">1</label>
	<input type="radio" id="n2" name="rr"><label for="n2">2</label>
	<input type="radio" id="n3" name="rr"><label for="n3">3</label>
   <button class="layer_close" type="button">ok</button>
</div>

Answer 1

我假设您想将焦点返回到所单击的按钮（并导致弹出窗口打开）

因此，执行此操作的方法是在变量中保留对单击按钮的引用，以便以后可以使用它来将焦点移到该元素上。

$(function($) {
  var openerButton;
  $('.btn').click(function() { 
    openerButton = this;
    $('.popup').show().attr('tabindex', '0').focus();
  });
  $('.layer_close').click(function() {
    $('.popup').hide().removeAttr('tabindex');
    openerButton.focus();
  });
});

.popup {  display: none}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn" id="start1">start date</button>
<button class="btn" id="end1">end date</button><br>
 
<button class="btn" id="start2">start date</button>
<button class="btn" id="end2">end date</button><br>
  
<button class="btn" id="start3">start date</button>
<button class="btn" id="end3">end date</button><br>
 

<div class="popup">
	<input type="radio" id="n1" name="rr"><label for="n1">1</label>
	<input type="radio" id="n2" name="rr"><label for="n2">2</label>
	<input type="radio" id="n3" name="rr"><label for="n3">3</label>
   <button class="layer_close" type="button">ok</button>
</div>

将焦点放在按钮上，这是单击时单击的位置

1 个答案: