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

Question

我使用.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/

Answer 1

在你的小提琴，你使用了大量的类，但没有任何标识。首先将标签的id与data-type类似的标签给予三个<div>。还要在div中添加一个类，将它们标识为表单域的容器。他们有共同之处。

在JavaScript，你现在需要做的是选择<label> s，这有类js-choice。对他们每个人，你都应用一个onClick处理程序。该处理程序只需隐藏所有具有表单字段的<div>，并显示属于被单击的<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。