如何使用 jquery 以编程方式检索属性以优化我的事件处理程序？

【问题标题】：How do I retrieve attributes programmatically using jquery in order to optimize my event handlers?如何使用 jquery 以编程方式检索属性以优化我的事件处理程序？
【发布时间】：2014-02-16 19:31:55
【问题描述】：

我正在使用 .on() 方法来显示/隐藏内容，具体取决于单击的标签；并指示当前检查的是哪个收音机。

我希望我的代码编程，以便标签的数据类型和输入的值是动态的而不是硬编码的。

最好的方法是什么？

$('.js-choice[data-type="skip"]').on('click', function () {
  $('input[name="choice"][value="1"]').prop('checked', true);
  $(jsSkip).removeClass('hide-content');
  $(jsAddr).addClass('hide-content');
  $(jsNew).addClass('hide-content');
});

这是我的 jsFiddle 的链接：http://jsfiddle.net/curlybraces/x8Qbz/2/

【问题讨论】：

标签： jquery attributes event-handling label radiobuttonlist

【解决方案1】：

在您的小提琴中，您使用了很多类但没有 id。首先将类似于标签的data-type 属性的id 赋予三个<div>s。还要向divs 添加一个类，将它们标识为表单字段的容器。他们有这个共同点。

在您的 JavaScript 中，您现在需要做的就是选择具有 js-choice 类的 <label>s。对它们中的每一个应用一个onClick 处理程序。该处理程序只需要隐藏所有具有表单字段的<div>s 并显示属于被单击的<label> 的那个。

这给我们留下了这个简单的功能：

$('.js-choice').each(function () {
    $(this).on('click', function () {
        $('.form-fields').addClass('hide-content');
        $('#fields-' + $(this).attr('data-type')).removeClass('hide-content');
    });
});

我有updated your jsFiddle。

【讨论】：