2016-04-13 7 views
1

Каков наилучший способ создания одной динамической функции, поэтому я не постоянно пишу несколько подобных функций?Рефакторинг нескольких jQuery для функций щелчка в одну функцию

$("#litigation-click").click(function() { 
    $(".textbox-analysis").hide() 
    $("#litigation-box").fadeIn("slow",function() {}); 
    $("html, body").animate({ scrollTop: $(document).height() }, "slow"); 

    return false; 
}); 

$("#goingconcern-click").click(function(){ 
    $(".textbox-analysis").hide() 
    $("#goingconcern-box").fadeIn("slow",function(){}); 
    $("html, body").animate({scrollTop: $(document).height()},"slow"); 

    return false; 
}); 

$("#unquoted-click").click(function() { 
    $(".textbox-analysis").hide() 
    $("#unquoted-box").fadeIn("slow",function(){}); 
    $("html, body").animate({ scrollTop: $(document).height() }, "slow"); 

    return false; 
}); 
+0

Не могли бы вы добавить примеры вашего HTML. В частности, нам нужно будет увидеть, как элементы '# X-click' относятся к элементам' # X-box' –

+0

, почему? Оставь это. Делает ли рефакторинг лучше читать. Я сомневаюсь в этом. Много ли повторного использования, на самом деле. Просто оставьте это – Liam

+0

Я предполагаю, что у него здесь более трех слушателей и только что отправил образец. – IrkenInvader

ответ

-1

Вы можете использовать jQuery Multiple Selector (“selector1, selector2, selectorN”) & event объекта, чтобы получить целевой элемент

$("#litigation-click, #unquoted-click, #goingconcern-click").click(function(event) { 
    $(".textbox-analysis").hide(); 
    var _getId = event.target.id; // will give target element 
    $("#"+_getId).fadeIn("slow",function() { 
    }); 
    $("html, body").animate({ scrollTop: $(document).height() }, "slow"); 
    return false; 
}); 
+2

Но как вы узнаете, следует ли выбирать '# судебный бокс',' # unquoted-box' или '# goingconcern-box'? –

+0

Вы правы, когда задавали вопрос, как узнать цель события. Но если вы проверяете обработчик кликов, все они выполняют ту же работу. если это так, он должен был использовать общий класс. – brk

+0

Я полностью согласен. Однако это всего лишь половина ответа. –

0

Вы можете использовать запятую для нескольких селекторов, а затем раскол нажал id, чтобы получить первую часть и использовать его для создания окна id:

$("#unquoted-click, #goingconcern-click, #unquoted-click").click(function() { 
    $(".textbox-analysis").hide(); 

    $("#" + this.id.split('-')[0] + "-box").fadeIn("slow",function(){}); 
    $("html, body").animate({ scrollTop: $(document).height() }, "slow"); 

    return false; 
}); 

Если вы можете заполнить свой HTML-код, мы можем найти другой способ получить поле относительно.

Надеюсь, это поможет.

0

Вы можете написать функцию с параметром . Например.

function Clicked(elClicked) { 
    $(".textbox-analysis").hide() 
    $(elClicked).fadeIn("slow",function() { 
    }); 
    $("html, body").animate({ scrollTop: $(document).height() }, "slow"); 
    return false; 
} 

затем вызвать эту функцию в Вашем случае щелчка с аргументом ид элементов, которые были щелкнул

$("#litigation-click, #goingconcern-click, #unquoted-click").click(function() { 
    Clicked("#" + $(this).attr('id')); 
}); 

$(this).attr('id') получает идентификатор элемента щелкнул.

Смежные вопросы