Упрощение кода Jquery - PullRequest
Новая
       30

Упрощение кода Jquery

0 голосов
/ 19 февраля 2012

Я довольно новичок в 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, а не класс.Я полагаю, что должен быть способ создать разделяемую функцию для каждой из них, которая каким-то образом изменяет имя класса на идентификатор, совпадающий с тем же именем функции, и повторно использует остальную часть кода.Может ли кто-нибудь помочь мне пролить свет на это?

Ответы [ 4 ]

2 голосов
/ 19 февраля 2012

Попробуйте этот код: 

$(".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);
});
0 голосов
/ 19 февраля 2012

Как насчет этого 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>
0 голосов
/ 19 февраля 2012

В случае нескольких классов и если ваш элемент (например, div) такой: 

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

Нет необходимости называть класс таким же, как у идентификатора.

Сделай что-нибудь подобное: 

<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);
});
0 голосов
/ 19 февраля 2012

Не видя ваш 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);
});
...