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

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

Jquery代码简化

4 个答案: