Question

简短而重要。有什么更好的方法来写这个，所以我不会一遍又一遍地重复相同的代码。

$('.login').click(function(e){
    e.preventDefault();
    $('.model._login').fadeIn();
    $('body').addClass('no-scroll')
});

$('._view-observations').click(function(e){
    e.preventDefault();
    $('.model._key-observations-model').fadeIn();
    $('body').addClass('no-scroll')
});

$('._forgottenPW').click(function(e){
    e.preventDefault();
    $('.model._forgottenPW').fadeIn();
    $('body').addClass('no-scroll')
});

提前致谢！

Answer 1

您可以将要尝试淡入的类的名称作为按钮本身的data-element属性。然后，为所有人添加一个公共类btn-fadein。

这允许您重用一个处理程序，引用data-element属性来显示相应的元素。

$(".btn-fadein").click(function(e) {
  var elemClass = $(this).data("element"); //Get data-element value
  var $elem = $(".model." + elemClass);    //Use it to select the correct element
  $elem.fadeIn();                          //Fade in the element    
        
  e.preventDefault();
  $('body').addClass('no-scroll');
});

.model {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="login btn-fadein" data-element="_login">Login</button>
<button class="_view-observations btn-fadein" data-element="_key-observations-model">View Observations</button>
<button class="_forgottenPW btn-fadein" data-element="_forgottenPW">Login</button>

<div class="model _login">login</div>
<div class="model _key-observations-model">key observations model</div>
<div class="model _forgottenPW">forgotten pw</div>

Answer 2

这是使用多维数组的一种方法。

var elements = [
  ['.login', '.model._login'],
  ['._view-observations', '.model._key-observations-model'],
  ['._forgottenPW', '.model._forgottenPW']
];

$.each(elements, function(i, j) {
  $(j[0]).click(function(e) {
    e.preventDefault();
    $(j[1]).fadeIn();
    $('body').addClass('no-scroll')
  });
});

Answer 3

识别冗余代码并将其抽象出来。

它们之间的唯一区别是被淡入的类的名称，因此该函数将类名作为参数并返回一个新函数：

const generateClickHandler = classToFadeIn => e => {
    e.preventDefault();
    $(classToFadeIn).fadeIn();
    $('body').addClass('no-scroll')
}

$('.login').click(generateClickHandler('.model._login'));
$('._view-observations').click(generateClickHandler('.model._key-observations-model'));
$('._forgottenPW').click(generateClickHandler('.model._forgottenPW'));

什么是清洁/ OOP方式来写这个？

3 个答案: