jQueryコードを再利用可能な関数にリファクタリングする

Question

誰かがこのコードを再利用可能な関数にリファクタリングして使用方法を教えてもらえると本当に感謝します。私はちょっと初心者ですが、私はたくさんのものを繰り返していることがわかります。それをより良く書く方法があると確信しています。

必要な場合はhtmlを追加できます。

$("[value=home]").click(function() { 
    $(currentLink).removeClass("cantclick"); 
    $(current).hide(); 
    $(this).addClass("cantclick"); 
    $("#texts").fadeIn(900); 
    current = $("#texts"); 
    currentLink = $("[value=home]"); 
    console.log("current is " + current.text() + "."); 
}); 

$("[value=aboutme]").click(function() { 
    $(currentLink).removeClass("cantclick"); 
    $(current).hide(); 
    $(this).addClass("cantclick") 
    $("#aboutmetext").fadeIn(900); 
    current = $("#aboutmetext"); 
    currentLink = $("[value=aboutme]"); 
    console.log("current is " + current.text() + "."); 
}); 

$("[value=tuition]").click(function() { 
    $(currentLink).removeClass("cantclick"); 
    $(current).hide(); 
    $(this).addClass("cantclick") 
    $("#tuitiontext").fadeIn(900); 
    current = $("#tuitiontext"); 
    currentLink = $("[value=tuition]"); 
    console.log("current is " + current.text() + "."); 
}); 

$("[value=consultancy]").click(function() { 
    $(currentLink).removeClass("cantclick"); 
    $(current).hide(); 
    $(this).addClass("cantclick") 
    $("#consultancytext").fadeIn(900); 
    current = $("#consultancytext"); 
    currentLink = $("[value=consultancy]"); 
    console.log("current is " + current.text() + "."); 
}); 

Answer 1

問題は、「現在」にリンク[value=]をリンクされています。

var linked = ""; 
var val = $(this).attr("value"); 
if (val === "home") linked = "texts"; 
if (val === "aboutme") linked = "aboutmetext"; 

またはスイッチで同じ、例えば：

は

var linked = ""; 
switch ($(this).attr("value")) 
{ 
    case "home": linked="texts"; break; 
    case "aboutme": linked="aboutmetext"; break; 
} 

これらの両方が追加メンテナンスを必要と/削除を

あなたは、複数のifの、例えばでコードを経由してこれを行うことができますリンクのため、私の推奨する方法はデータ属性を介してそれらをリンクすることです：

<div class='button-container'> 
    <button data-value="home">home</button> 
    <button data-value="aboutme">about me</button> 
    <button data-value="tuition">tuition</button> 
</div> 
<div class='texts-container'> 
    <div data-link="home">home text</div> 
    <div data-link="aboutme">about me text</div> 
    <div data-link="tuition">tuition text</div> 
</div> 

あなたのコードはmです簡単に：

$("[data-value]").click(function() { 
    $(".cantclick").removeClass("cantclick"); 
    $(this).addClass("cantclick"); 
    $(".texts-container :visible").fadeOut(900, function() { 
     $("[data-link=" + $(this).data("value") + "]").fadeIn(900); 
    }); 

    // can get these dynamically, no need to store them in variables 
    // current = $("button.cantclick") 
    // currentLink = $("[data-value=" + $("button.cantclick").attr("value") + "]"); 
}); 

ボタン/リンクの追加/削除時に更新する必要はありません。

は、アニメーション中に正しくない可能性があり、すべてのテキストが（簡単に固定）で開始するように表示されます:visibleとしてフェードイン/アウトの周りにいくつかの作業を必要とするかもしれない - しかし、周りのdata-を経由してリンクされた原則は、まず

Answer 2

属性すべての共通のコードを持つ関数を作成します。

function handleClick(elem, current, currentLink, text) { 
    currentLink.removeClass("cantclick"); 
    current.hide(); 
    elem.addClass("cantclick"); 
    text.fadeIn(900); 
    console.log("current is " + current.text() + "."); 
} 

あなたはその後、ちょうどこの機能を使用するので、あなたのような要素に渡すことができます。

$("[value=consultancy]").click(function() { 
    handleClick($(this), $("#consultancytext"), $("[value=consultancy]"), $("#texts")); 
} 
// ... add it to the other elements the same way