Как я могу упростить этот код Jquery? - PullRequest
Новая
       14

Как я могу упростить этот код Jquery?

0 голосов
/ 11 августа 2011 
$('a#golf-link').click(function () {
    $('ul#golf').fadeIn(500);
    $('ul.img-list').not('#golf').fadeOut(200);
    $('a#golf-link').addClass("current-link");
    $('.side-menu li a').not('#golf-link').removeClass("current-link");
    });
$('a#bags-link').click(function () {
    $('ul#bags').fadeIn(500);
    $('ul.img-list').not('#bags').fadeOut(200);
    $('a#bags-link').addClass("current-link");
    $('.side-menu li a').not('#bags-link').removeClass("current-link");
    });
$('a#keyrings-link').click(function () {
    $('ul#keyrings').fadeIn(500);
    $('ul.img-list').not('#keyrings').fadeOut(200);
    $('a#keyrings-link').addClass("current-link");
    $('.side-menu li a').not('#keyrings-link').removeClass("current-link");
    });

Как видите, приведенный выше код повторяется, и я хотел бы его упростить.

Я не уверен, что использую правильные термины здесь, но вы должны понять суть.

Что я хотел бы сделать, так это создать такую ​​функцию 

$('a#l-//VARIABLE-HERE//-link').click(function () {
    $('div#l-//VARIABLE-HERE//').fadeIn(500);
    $('div.clothes-type').not('#l-//VARIABLE-HERE//').fadeOut(200);
    $('a#l-//VARIABLE-HERE//-link').addClass("current-link");
    $('.side-menu li a').not('#l-//VARIABLE-HERE//-link').removeClass("current-link");
    });

и все, что мне нужно сделать, это вызвать функцию и заменить // VARIABLE-HERE // на такие вещи, как гольф, сумки, брелки и т. Д. И т. Д.

Любая помощь будет принята с благодарностью.

Спасибо.

Ответы [ 6 ]

3 голосов
/ 11 августа 2011

Самое простое, что могло бы быть, это использовать общие классы среди всех трех наборов объектов, чтобы идентичный код мог работать везде.Мы должны были бы увидеть фактический HTML, чтобы знать, как рекомендовать это более конкретно, хотя.

Далее, вы могли бы сделать одну функцию, которая принимает один параметр, который устанавливает обработчик щелчка и выполняет действие щелчка. 

function configureClick(item) {
    $('a' + item + '-link').click(function() {
        $('ul' + item).fadeIn(500);
        $('ul.img-list').not(item).fadeOut(200);
        $('a' + item + '-link').addClass("current-link");
        $('.side-menu li a').not(item + '-link').removeClass("current-link");
    });
}

configureClick("#golf");
configureClick("#bags");
configureClick("#keyrings");

И, наконец, если вы покажете нам фактический HTML, между различными элементами может быть геометрическое расположение, которое сочетается с тегами и идентификаторами, которые можно кодировать, чтобы определить, над какими из них работать дляданный клик (родители, братья и сестры, типы тегов и т. д.).

1 голос
/ 11 августа 2011

Предполагая, что ваше соглашение об именах будет постоянным: 

function setItUp(objName) {
    $('a#' + objName + '-link').click(function() {
    $('ul#' + objName).fadeIn(500);
        $('ul.img-list').not('#' + objName).fadeOut(200);
        $('a#' + objName + '-link').addClass("current-link");
        $('.side-menu li a').not('#' + objName + '-link').removeClass("current-link");
    });
}

Тогда звоните: 

setItUp('golf');
setItUp('bags');
setItUp('keyrings');
0 голосов
/ 11 августа 2011

Учтите это: 

$(menu).click(function(e) {
    var id = e.target.id.split('-')[0],
        clss = 'current-link';

    $(e.target).closest('li').addClass(clss).siblings().removeClass(clss);
    $('#' + id, imgslist).fadeIn(500).siblings(':visible').fadeOut(200);
});

, где menu - элемент .side-menu, а imglist - элемент .img-list. Я рекомендую вам определить эти ссылки на странице загрузки / DOM готово так: 

var menu = $('.side-menu')[0],
    imglist = $('.img-list')[0];

(конечно, делайте это, только если эти элементы статичны на странице)

Кстати, я определил, что класс установлен на элементе LI, а не на элементе ANCHOR, потому что это делает код JavaScript более простым и более читаемым (и это также хорошая практика в CSS для определения класса на самом внешнем элемент, представляющий сущность).

0 голосов
/ 11 августа 2011 
$('a[id$="-link"]').click(function () {
    var idVal = "#" + this.id.match(/(.*)-link/)[1]
    $('ul'+idVal).fadeIn(500);
    $('ul.img-list').not(idVal).fadeOut(200);
    $('a'+idVal+'-link').addClass("current-link");
    $('.side-menu li a').not(idVal+'-link').removeClass("current-link");
    });

Это должно сработать.

0 голосов
/ 11 августа 2011

Пользователь это 

$('a#golf-link,a#bags-link,a#keyrings-link').click(function () {
    var currentId = $(this).attr('id');
    var currentType = currentId.replace("-link", "");

    $('ul#'+currentType).fadeIn(500);
    $('ul.img-list').not('#'+currentType).fadeOut(200);
    $('a#'+currentId).addClass("current-link");
    $('.side-menu li a').not('#'+currentId).removeClass("current-link");

});
0 голосов
/ 11 августа 2011

Как то так должно работать 

$('a[id$="-link"]').click(function () {

    itemName =  $(this).attr('id').replace("-link","");

    $('div#'+itemName).fadeIn(500);
    $('div.clothes-type').not('#l-'+itemName).fadeOut(200);
    $('a#l-'+itemName +'-link').addClass("current-link");
    $('.side-menu li a').not('#l-'+itemName +'-link').removeClass("current-link");        

});
...