これを記述するクリーナー/ OOPの方法は何ですか？

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

ここでは、多次元配列を使用する方法の1つです。

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'));