我如何将两个Jquery函数放在一起?

时间:2016-12-06 18:52:29

标签: javascript jquery html

我的问题是我有两个功能,他们为不同的对象做同样的事情

这是代码。

$('body').on('click', '.toogle1', function() {
    $('body').find('.buttonshow').slideToggle(300);
    $('body').find('.buttonshow ').val(title);
});

$('body').on('click', '.toogle', function() {
    $('body').find('.htmlshow').slideToggle(400);
});

3 个答案:

答案 0 :(得分:1)

$('body').on('click', '.toggle, .toggle1', function(){ ... });

这将导致任何有课程“切换”的孩子的逻辑解雇。或者' toggle1'。

答案 1 :(得分:0)

我不知道您的HTML代码,但是您在课程toggle的位置添加了第二课toggle1,因此最终课程将为class="toggle toggle1",然后:

$('body').on('click', '.toogle1', function() {
    $('body').find('.buttonshow').slideToggle(300);
    $('body').find('.buttonshow ').val(title);
    $('body').find('.htmlshow').slideToggle(400);
});

但是如果你在这个类中有不同的CSS,请使用另一个答案。

答案 2 :(得分:0)

只需创建一个您将使用的函数,而不是您最后传递的函数:

function toggleElement(selector, ms){
   selector.slideToggle(ms);
}

然后,您只需将其应用于您的jQuery

$('body').on('click', '.toogle1', function(){
     toggleElement($('.buttonshow'), 300);
     // Then, the rest of your logic that differs
});

所以基本上,这就是你在添加其他逻辑时使用同样功能的函数的方法,最好的方法是创建一个基本函数来完成将要重复的逻辑,然后,你在程序上编写其余的你的逻辑不同。这样,处理起来就容易得多。