Question

我有一些看起来像这样的JS函数：

$('#div1 input[type=radio]').change(function() {
    if(this.value=='YES'){
        $('#field1').show();
    }else{
        $('#field1').hide();
    }
});

$('#div2 input[type=radio]').change(function() {
    if(this.value=='YES'){
        $('#field2').show();
    }else{
        $('#field2').hide();
    }
});

$('#div3 input[type=radio]').change(function() {
    if(this.value=='YES'){
        $('#field3').show();
    }else{
        $('#field3').hide();
    }
});

因为它们很相似，有一种方法可以用更少的代码来改进它们吗？

由于

Answer 1

最简单的解决方案如下。我用切换替换了if-else hide / show。我还使用===进行真正的类型/值比较。

＆＃13;

function changeToggle(inputSelector, fieldSelector, value) {
  $(inputSelector).change(function() {
    $(fieldSelector).toggle(this.value === value);
  });
}

changeToggle('#div1 input[type=radio]', '#field1', 'YES');
changeToggle('#div2 input[type=radio]', '#field2', 'YES');
changeToggle('#div3 input[type=radio]', '#field3', 'YES');

＆＃13;

使用循环

＆＃13;

$("*[id^='div']").each(function(index, div) {
  var id = $(div).attr('id').match(/^\w+(\d+)$/)[1];  
  $(div).find('input[type=radio]').change(function(e) {
    $('#field' + id).toggle(this.value === 'YES');
  });
});

＆＃13;

Answer 2

尝试使用属性以选择器.closest()，String.prototype.replace()和RegExp /\D/g开头，以匹配id中最近元素的id中的数字以"div"

开头

$("[id^=div] input[type=radio]").change(function() {
    var n = $(this).closest("[id^=div]")[0].id.replace(/\D/g, "");
    if (this.value=="YES") {
        $("#field" + n).show();
    } else {
        $("#field" + n).hide();
    }
});

Answer 3

使用自定义属性是更好的方法，或者如果您使用的是HTML 5，则可以使用数据属性。见下面的例子：

<input type="radio" data-show="#field1" />
<input type="text" id="field1" />

<input type="radio" data-show="#field2" />
<input type="text" id="field2" />

<input type="radio" data-show="#field3" />
<input type="text" id="field3" />

JS：

$('input[type=radio]').change(function() {
    var targetEl = $(this).data('show');
    if($(this).is(':checked')) {        
        $(targetEl).show();
    }else {
        $(targetEl).hide();
    }
});

Jquery - 一种多次重用相同代码的方法

3 个答案:

使用循环