「不要重複自己」的方法來一個jQuery菜單

我有一個表單與幾個輸入。當點擊這些輸入時，jquery（farbtastic）的顏色選擇器插件會在淡入/淡出下拉列表中加載。「不要重複自己」的方法來一個jQuery菜單

每個輸入都是唯一的，每次都會加載一個不同的顏色選擇器。我使用這個代碼是：

// 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的下拉菜單？

來源

2012-02-27 tctc91

使用'$（this）'代替那個^ ... – 2012-02-27 21:14:17

首先，每種類型的元素的添加類將它們分組在一起：

   <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/

來源

2012-02-27 21:16:04 Jasper

很好用。也很簡單。謝謝！ – tctc91 2012-02-27 21:22:26

我還沒有使用farbtastic，但一般的做法是使用類而不是ID。你會有某種類型的可重用類"colorPickable"或任何你想調用它。然後，您將遍歷DOM以限制您想要生效的特定元素集。

的DOM遍歷這個API是相當豐富的，但方法來查找名單將包括.siblings()「.closest()，.parent()，.next()，.prev()，.children()和.find()。你不需要全部，但是沒有你的結構的示例代碼，這很難說。

[更新：我看到示例HTML已包含在內，但其他人已經加入了特定的代碼示例，因此我會將它們留給它...雖然我認爲存在對您需求的誤解]

來源

2012-02-27 21:16:17

使用功能

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);

這樣，你是乾性，你不執行相同的選擇了這麼多次，你也應該嘗試的d避免。

來源

2012-02-27 21:18:11 bevacqua

「不要重複自己」的方法來一個jQuery菜單

回答

相關問題