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是调用颜色选择器的ID

HTML：

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

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()，{{1 }，.prev()和.children()。你不需要全部，但没有结构的示例代码，很难说。

[更新：我看到现在包含了示例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);

这样你就干了，你不会多次执行相同的选择器，你也应该尽量避免。

jQuery菜单中的“不要重复自己”的方法

3 个答案: