使用列表作为无线电组

Question

我使用UL作为广播组，并使用以下脚本：

1. 在li上添加/删除一个类（基本上是活动状态）。
2. 将li的值设置为相应文本字段中的值。

脚本：

jQuery(function($){
    var hinput = $('input[name="range1"]');
    $("ul#range1 li").click( function() {

    hinput.val($(this).attr('value'))
    $(".active").removeClass("active");
    $(this).addClass("active");
    });
})

HTML：

<ul class="rangeSelect" id="range1">
     <li value="1"><span>1</span></li>
     <li value="2"><span>2</span></li>
     <li value="3"><span>3</span></li>
</ul>
<input type="text" name="range1">

此设置适用于一个组，但不允许在一个页面上设置多个组。

我正努力修改脚本以允许：

1. 要设置为父UL上的ID的输入名称（在脚本中）。
2. 要在父UL上设置ID的UL ID（在脚本中）。
3. 将活动类应用于活动列表中的li（而不是仅在多个UL之间激活一个活动状态）。

所有这些点都旨在允许使用多个列表而无需修改/复制脚本。

小提琴：http://jsfiddle.net/EjNyT/1/

提前致谢。

@rrfive

Answer 1

我个人的建议是创建一个可以使用多个元素的简单插件，例如：

// creating a jQuery plug-in, protecting the '$' alias:
(function ($) {
    // defining the name of the plug-in itself, and supplying 'opts' to make it,
    // in some small way, customisable:
    $.fn.listRadio = function (opts) {
        // incorporating the user-defined options (from 'opts') with
        // the defined defaults (those defined in the object literal):
        var settings = $.extend({
            'activeClassName' : 'active',
            'valueProperty' : 'data-value'
        }, opts);

        // 'this' is the jQuery object, not a DOM node, we're iterating over that:
        this.each(function () {
            // $(this) is the current element in the collection over
            // which we're iterating:
            var wrapper = $(this),

                // defining which element should receive the value,
                // in this case it's the 'input' whose 'name' is equal
                // to the current-element's id property:
                outputTo = $('input[name="' + wrapper.prop('id') + '"]');

            // binding a click-handler to the current element:
            wrapper.on('click', function (e) {

                // caching the clicked element:
                var target = e.target,
                    $self;

                // finding out which element should receive the active state,
                // if the clicked element is an 'li' that should be the active element:
                if (target.tagName.toLowerCase() === 'li') {
                    $self = $(target);
                }

                // otherwise, it should be the element that has the activeClassName:
                else if (wrapper.find('li.' + settings.activeClassName).length) {
                    $self = wrapper.find('li.' + settings.activeClassName);
                }

                // otherwise it's the first 'li' in the current element
                // (this will likely be the case only on page-load):
                else {
                    $self = wrapper.find('li').eq(0);
                }

                // setting the value to the relevant property/attribute of
                // whichever element is currently 'active':
                outputTo.val($self.attr(settings.valueProperty));

                $self

                    // adding the activeClassName to the 'active' element:
                    .addClass(settings.activeClassName)

                    // finding the siblings of the active element:
                    .siblings()

                    // removing the activeClassName from those siblings:
                    .removeClass(settings.activeClassName);
            // triggering the click-event, so the plugin acts on page-load:
            }).click();
        });
    };
}(jQuery));

// call like so (no customisation):
$('.rangeSelect').listRadio();

JS Fiddle demo

// call and set a different class-name to represent the 'active' state:
$('.rangeSelect').listRadio({
    'activeClassName' : 'otherClassName'
});

JS Fiddle demo

在上面的说明中，仍有li个active类名称的元素，它仍然将其着色为红色，但不影响其他li的选择} elements。

// call and set a different attribute from which to receive the 'value':
$('.rangeSelect').listRadio({
    'valueProperty' : 'id'
});

JS Fiddle demo

参考文献：

• jQuery的：
  • addClass()。
  • Attribute-equals ([attribute="value"]) selector。
  • each()。
  • eq()。
  • find()。
  • $.extend()。
  • on()。
  • prop()。
  • removeClass()。
  • siblings()。
  • val()。
• ＆＃39;平原＆＃39; JavaScript的：
  • Element.tagName。
  • String.prototype.toLowerCase()。
• 资源：
  • ＆＃34; How to Create a Basic Plugin＆＃34;