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

您可以看到该函数基本上淡出一个框并淡入另一个框。您可以看到它淡入的框始终与 .click 函数同名，只是它是一个单独的 CSS id 容器而不是一个类。我认为必须有一种方法为每个函数创建一个共享函数，以某种方式将类的名称更改为与函数的相同名称匹配的 id，并重新使用其余的代码。谁能帮我解释一下吗？

Answer 1

试试这个代码：

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

无需查看您的 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);
});

Answer 3

这个 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>

Answer 4

如果有多个类，并且您的元素（例如 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);
});