jQuery代碼簡化

我是相當新的jQuery和我試圖想出一個辦法來簡化/優化我的代碼，因爲現在它的工作原理，但我只知道有這樣做的更有效的方法。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

你可以看到功能基本上淡出一個框，另一個變淡。您可以看到它所淡入的框始終與.click函數名稱相同，只是它是一個單獨的CSS id容器而不是類。我想，必須有創造每個它們的共同作用以某種方式改變類的名稱匹配函數的名稱相同的ID的方式，並重新使用該代碼的其餘部分。任何人都可以幫我解釋一下嗎？

來源

2012-02-19 Xenostar

這是非常困難提供任何建議，而無需查看HTML的結構。我建議你看一下jQuery的遍歷方法：http://api.jquery.com/category/traversing/ – 2012-02-19 18:12:02

我添加HTML標記，以幫助澄清。 – Xenostar 2012-02-19 18:19:52

試試這個代碼：

$(".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); 
});

來源

2012-02-19 18:15:06

這隻適用於元素只有一個類的情況。 – 2012-02-19 18:15:37

我剛測試過它，它看起來和我單獨的功能一樣。所以非常感謝大家的幫助，我想這基本上就是我想要做的 – Xenostar 2012-02-19 18:21:39

所以沒有upvote和接受？：P – 2012-02-19 18:28:44

沒有看到你的HTML或修改你的HTML，這是即使做到這一點的作品的一種方式你點擊的項目對他們的多個類名稱：

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，它可以做更簡單。

例如，如果你只對點擊的對象一類，這是可以做到這樣的：

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

來源

2012-02-19 18:22:14 jfriend00

在多個類別的情況下，如果你的元素（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); 
});

來源

2012-02-19 18:25:19 Valky

如何這個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>

來源

2012-02-19 18:25:53

jQuery代碼簡化

回答

相關問題