2つのJquery関数を一緒にするにはどうすればいいですか？

Question

私の問題は、私は同じことをするが、異なるオブジェクトの2つの機能を持っていることです。

ここにコードです。

$('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); 
}); 

Answer 1

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

これは、クラスのトグル 'または「toggle1」を持っているすべての子供のための発射ロジックにつながります。

Answer 2

私はあなたの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を持っている場合は、別の答えを使用しています。

Answer 3

ちょうどあなたは、あなたが最後に渡しているanonimous機能の代わりに使用する関数を作成：

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

をそして、あなたは、単にだからあなたのjQuery

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

に適用します基本的には、これは他のロジックを追加するときに同じことをする関数を使用する方法です。繰り返すロジックを実行する基本関数を作成してから、そのロジックの残りの部分を手続き的に記述するのが最善の方法です。このように、対処するほうがはるかに簡単です。