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代码简化

回答

相关问题