javascript - Jquery，如何将注意力集中在包装器 div 内的子元素上？

Question

我有一个 div 包装器和 3 个输入元素(文本输入和 + - 数量按钮)。 HTML 结构如下所示:

<div id="total_text" style="display:none;" class="total_price_txt">Total price:
<div id="total_price" class="total_price">$0.00</div>
</div>

<div id="wrapper">
    <input id="plus"></input>
    <input id="text"></input>
    <input id="minus"></input>
</div>

还有一个 jquery 代码，用于在输入焦点上滑出总量:

$('#wrapper').on('focusin',function(e){
$("#product_wrapper").addClass("jquery_product");
$('#total_text').slideDown(400);

});

$('#wrapper').on('focusout',function(e){
$("#product_wrapper").removeClass("jquery_product");
$('#total_text').slideUp(400);
});

$('#amount_input').on('change paste keyup',function(e){
var filterPrice=$('#product_price').text().replace(/[^0-9.]+/gi, '');  
var price=parseFloat(filterPrice, 10);
var inputAmount = $('#amount_input').val();
var total = (inputAmount*price).toFixed(2);
$('#total_price').html("<div class='total_price'>$" +total+ "</div>");  
});

它有点管用，但问题是当我在文本框中输入一个输入并想用任何 + - 框更改它时，它会再次上下滑动。每次我在任何这些输入之间切换时都会发生这种情况。我希望它始终关注整个 div 包装器，无论这些输入中的哪一个是焦点，直到包装器本身失去焦点。

Answer 1

我认为这可以满足您的需要:http://jsfiddle.net/1zojf2L1/

只是 .stop(true, false) focusin 中的动画。

$('#wrapper').on('focusin',function(e){
  $("#product_wrapper").addClass("jquery_product");
  $('#total_text').stop(true, false).slideDown(400);
});

$('#wrapper').on('focusout',function(e){
  $("#product_wrapper").removeClass("jquery_product");
  $('#total_text').slideUp(400);
});