javascript - 当单击同一元素时，jquery 删除背景闪烁

Question

我编写了下面的代码来为用户正在编辑的行设置背景。我遇到的问题是，当用户在同一行中单击另一个输入字段时，该函数会再次自行执行并导致重复 fadeOut 和 fadeIn。

我能做什么或如何检查单击的元素是否仍然相同，以防止“每个”循环重置其他表单行，以防它们仍然具有突出显示的颜色？

$('body').click(function(e) {
        if ($(e.target).hasClass('form-row') || $(e.target).parents('.form-row').size()) { 
           $('.form-row').each(function(){
           $(this).animate({ backgroundColor:'#ffffff' }, 0);
           });
           $(e.target).parents('.form-row').animate({ backgroundColor:'#eff3f6' }, 350);
        } else { 
           $('.form-row').each(function(){
           $(e.target).parents('.form-row').animate({ backgroundColor:'#fff' }, 350);
           });
        }
    });

非常感谢!

Answer 1

尝试

jQuery(function ($) {
    $('body').click(function (e) {
        var $target = $(e.target),
            $row = $target.closest('.form-row');

        //if the row is already active don't do anything
        if ($row.hasClass('active')) {
            return;
        }

        //change the already active row
        $('.form-row.active').removeClass('active').animate({
            backgroundColor: '#ffffff'
        }, 0);
        $row.addClass('active').animate({
            backgroundColor: '#eff3f6'
        }, 350);;
    });
});

演示:Fiddle

---

但是如果你使用的是 jQuery UI 那么

jQuery(function($) {
  $('body').click(function(e) {
    var $target = $(e.target),
      $row = $target.closest('.form-row');

    //if the row is already active don't do anything
    if ($row.hasClass('active')) {
      return;
    }

    //change the already active row
    $('.form-row.active').removeClass('active', 0);
    $row.addClass('active', 350);
  });
});

.form-row {
  background-color: #ffffff;
}
.form-row.active {
  background-color: #eff3f6;
}

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<div class="form-row">Row 1</div>
<div class="form-row">Row 2</div>
<div class="form-row">Row 3</div>
<div class="form-row">Row 4</div>
<div class="form-row">Row 5</div>