Jqueryコードの簡略化

Question

jQueryの新機能で、コードを単純化/最適化する方法を見つけようとしています。なぜなら、今は動作していますが、もっと効率的な方法があるからです。

$(".th_s3studios_layout").click(function(){ 
    $("#portfolio_home").fadeOut(500); 
    // Fading in the project page 
    $("#th_s3studios_layout").delay(1000).fadeIn(500); 
}); 
$(".th_mangafan_layout").click(function(){ 
    $("#portfolio_home").fadeOut(500); 
    // Fading in the project page 
    $("#th_mangafan_layout").delay(1000).fadeIn(500); 
}); 
$(".th_356_P3").click(function(){ 
    $("#portfolio_home").fadeOut(500); 
    // Fading in the project page 
    $("#th_356_P3").delay(1000).fadeIn(500); 
}); 
$(".th_hrycyna_layout").click(function(){ 
    $("#portfolio_home").fadeOut(500); 
    // Fading in the project page 
    $("#th_hrycyna_layout").delay(1000).fadeIn(500); 
}); 

対応するHTMLマークアップを次に示します。

<div class="col_16" id="portfolio_home"> 
     <div class="col_04 folio"><div class="th_s3studios_layout">Content 1</div></div> 
     <div class="col_04 folio"><div class="th_mangafan_layout">Content 2</div> 
    </div> 

    <div class="col_16" id="th_s3studios_layout" 
     <div class="col_04 folio"><div class="preview1">Pop up stuff for content 1</div></div> 
     <div class="col_04 folio"><div class="preview2">Pop up stuff for content 1</div></div> 
    </div 
    <div class="col_16" id="th_mangafan_layout" 
     <div class="col_04 folio"><div class="preview1">Pop up stuff for content 2</div></div> 
     <div class="col_04 folio"><div class="preview2">Pop up stuff for content 2</div></div> 
    </div 

この機能は、基本的に1つのボックスをフェードアウトし、別のフェードインでフェードすることがわかります。フェードインするボックスは、.click関数と同じ名前ですが、クラスではなく別のCSS IDコンテナであることがわかります。クラスの名前を関数の同じ名前に一致するidに変更し、残りのコードを再利用する共有関数を作成する方法があるはずです。誰も私にこれについていくつかの光を当てることができますか？

Answer 1

このコード試してください：あなたのHTMLを見たり、HTMLを変更することなく、

$(".th_s3studios_layout,.th_mangafan_layout,.th_356_P3,.th_hrycyna_layout").click(function(){ 
    $("#portfolio_home").fadeOut(500); 
    var newId="#"+ $(this).attr('class').replace(".",""); 
    $(newId).delay(1000).fadeIn(500); 
}); 

Answer 2

を、これはあなたがアイテムをクリックした場合でも動作するそれを行うための一つの方法であるそれらの上に複数のクラス名があります。

を

var classList = [ 
    ".th_s3studios_layout", 
    ".th_mangafan_layout", 
    ".th_356_P3", 
    ".th_hrycyna_layout" 
]; 

$(classList.join(",")).click(function(){ 
    $("#portfolio_home").fadeOut(500); 
    var this$ = $(this); 
    // find which class name is in the clicked on item 
    for (var i = 0; i < classList.length; i++) { 
     if (this$.hasClass(classList[i]) { 
      $("#" + classList[i].substr(1))..delay(1000).fadeIn(500); 
      break; 
     } 
    } 
}); 

HTMLを表示してHTMLにクラスを追加することができれば、さらに簡単に行うことができます。

あなただけクリックされたオブジェクト上の1つのクラスを持っている場合たとえば、それはこのように行うことができます。複数のクラスの場合は

$($(".th_s3studios_layout, .th_mangafan_layout, .th_356_P3, .th_hrycyna_layout").click(function(){ 
    $("#portfolio_home").fadeOut(500); 
    $("#" + this.className).delay(1000).fadeIn(500); 
}); 

Answer 3

を、そしてあなたの要素（例えばDIV）はそのようなものである場合：

<div id="th_s3studios_layout" class="th_s3studios_layout"></div> 

idと同じ名前のクラスを指定する必要はありません。

そのような何か：これについて

<a id="th_s3studios_layout" class="fader">See content</a> 
<div id="target_th_s3studios_layout">Content</div> 
<a id="th_mangafan_layout" class="fader">See content</a> 
<div id="target_th_mangafan_layout">Content</div> 
... 

$(".fader").click(function(){ 
    $("#portfolio_home").fadeOut(500); 
    var id='#target_'+$(this).attr('id'); 
    $(id).delay(1000).fadeIn(500); 
}); 

Answer 4

方法はJS：

$(".whateveryouwanthere").click(function(){ 
    $("#adjustthis").fadeOut(500); 
    // Fading in the project page 
    $("#adjustthis").delay(1000).fadeIn(500); 
}); 

そしてth_s3studios_layoutため、たとえば、あなたの要素に別のクラスを追加する：

<div class="th_s3studios_layout whateveryouwanthere"></div>