jQueryメニューへの「Do not Repeat Yourself」アプローチ

Question

私はいくつかの入力を持つフォームを持っています。これらの入力がクリックされると、jquery（farbtastic）用のカラーピッカーアドオンがフェードイン/アウトドロップダウン内にロードされます。

各入力は一意であり、毎回異なるカラーピッカーを読み込みます。私はこのために使用しているコードは次のとおりです。

// Color Picker Popup Menus 
$('html, #mgBgColor, input').click(function() { 
    $('#picker-mgBgColor').fadeOut('fast'); 
}); 

$('#mgBgColor, #picker-mgBgColor').click(function(e){ 
    if(!$('#picker-mgBgColor').is(":visible")) { 
     $('#picker-mgBgColor').stop().fadeIn('fast'); 
    } 
    e.stopPropagation(); 
}); 

#mgBgColor特定の入力フィールドのIDです。

#picker-mgBgColorは、HTMLカラーピッカーに

を呼び出しIDです：

<p> 
    <label for="bg">BG color:</label> 
    <input type="input" id="mgBgColor" name="bg" value="" />  
    <span id="picker-mgBgColor"></span> 
</p> 
<p> 
<label for="textcolor">Text color:</label> 
    <input type="input" id="mgTextColor" name="textcolor" value="" /> 
    <span id="picker-mgTextColor"></span> 
</p> 

私の問題は、私はいくつかの異なる入力フィールドのためにこのコードの大きな塊を繰り返してるということです。 すべてのカラーピッカーIDで機能するドロップダウンメニューを1つだけコーディングするにはどうすればよいですか？

Answer 1

まず、一緒にグループ彼らに要素の種類ごとにクラスを追加します。

   <p> 
        <label for="bg">BG color:</label> 
        <input class="input-class" type="input" id="mgBgColor" name="bg" value="" />  
        <span class="picker" id="picker-mgBgColor"></span> 
       </p> 
       <p> 
        <label for="textcolor">Text color:</label> 
        <input class="input-class" type="input" id="mgTextColor" name="textcolor" value="" /> 
        <span class="picker" id="picker-mgTextColor"></span> 
       </p> 

は、その後、あなたがこれらのクラスで要素をターゲットにすることができます：ここでは

$('html, .input-class, input').click(function() { 
    $('.picker').fadeOut('fast'); 
}); 

$('.input-class').click(function(e){ 
    if(!$(this).next().is(":visible")) { 
     $(this).next().stop().fadeIn('fast'); 
    } 
    e.stopPropagation(); 
}); 

$('.picker').click(function(e){ 
    $(this).fadeOut('fast'); 
    e.stopPropagation(); 
});​ 

はデモです： http://jsfiddle.net/jasper/xW2g6/

Answer 2

私はfarbtasticを使用していませんが、これを行う一般的な方法はIDではなくクラスを使用することです。あなたは再利用可能なクラス"colorPickable"の何らかのものを持っています。次に、DOMをトラバースして、有効にしたい要素の特定のセットに自分自身を制限します。

DOMのトラバーサルのためのAPIはかなり豊富ですが、検索する方法の最終候補は.siblings() '.closest()、.parent()、.next()、.prev()、.children()、および.find()が含まれるであろう。あなたはすべてが必要なわけではありませんが、あなたの構造のサンプルコードがなければ、言うことは難しいです。

[更新：サンプルHTMLが含まれていますが、他の人がすでに特定のコード例を搭載しているので、私はそれらに残しておきます...あなたのニーズが誤解していると思います。

Answer 3

機能

function ConfigurePicker(picker) {  
    $('html, #mgBgColor, input').click(function() { 
     picker.fadeOut('fast'); 
    }); 

    picker.click(function(e){ 
     if(!picker.is(":visible")) { 
      picker.stop().fadeIn('fast'); 
     } 
     e.stopPropagation(); 
    }); 
}; 

使用法：あなたが乾燥しているとあなたは同じセレクタにあなたも試してみてください非常に多くの時間を、実行しない

var picker = $('#mgBgColor, #picker-mgBgColor'); 
ConfigurePicker(picker); 

この道を避けてください。