如何优化 jquery 函数将字母连接到标识符

Question

我想将一个字符 x 作为参数传递给以下函数 (x = a)

我想用 char 变量 x

替换所有标识符，例如 "#a1_field_box"

如何使用 var x 更改 "#a1_field_box"？所以如果参数是 b 我会得到 "#b1_field_box"，如果 x = 'c' 我会得到 "#c1_field_box" 等等

function ShowIfOther1()
{
    var x = 'a';    
    if ( $('#con1').prop('checked') )
    {
        $("#a1_field_box").show().fadeIn(500);  $("#a1_display_as_box").fadeIn(500); $("#field-a1").fadeIn(500);                                                
        $("#a2_field_box").show().fadeIn(500);  $("#a2_display_as_box").fadeIn(500); $("#field-a2").fadeIn(500);                                                
        $("#a3_field_box").show().fadeIn(500);  $("#a3_display_as_box").fadeIn(500); $("#field-a3").fadeIn(500);                                                
        $("#a4_field_box").show().fadeIn(500);  $("#a4_display_as_box").fadeIn(500); $("#field-a4").fadeIn(500);                                                
        $("#a5_field_box").show().fadeIn(500);  $("#a5_display_as_box").fadeIn(500); $("#field-a5").fadeIn(500);                                                
    } else {
        $("#a1_field_box").hide('slow');    $("#a1_display_as_box").hide('slow');$("#field-a1").hide('slow');
        $("#a2_field_box").hide('slow');    $("#a2_display_as_box").hide('slow');$("#field-a2").hide('slow');
        $("#a3_field_box").hide('slow');    $("#a3_display_as_box").hide('slow');$("#field-a3").hide('slow');
        $("#a4_field_box").hide('slow');    $("#a4_display_as_box").hide('slow');$("#field-a4").hide('slow');
        $("#a5_field_box").hide('slow');    $("#a5_display_as_box").hide('slow');$("#field-a5").hide('slow');
    }                       
}

Answer 1

.show().fadeIn(500)

show() 是多余的。它可以被删除，因为 fadeIn() 是 show() + animation.
所有的选择器都可以组合使用，以逗号分隔，进行相同的操作。例如。 fadeIn() 和 hide().
您可以使用 + 运算符

代码：

function ShowIfOther1(x) {
    if ($('#con1').prop('checked')) {
        $('#' + x + '1_field_box, #' + x + '1_display_as_box, #field-' + x + '1, #' + x + '2_field_box, #' + x + '2_display_as_box, #field-' + x + '2, #' + x + '3_field_box, #' + x + '3_display_as_box, #field-' + x + '3, #' + x + '4_field_box, #' + x + '4_display_as_box, #field-' + x + '4, #' + x + '5_field_box, #' + x + '5_display_as_box, #field-' + x + '5').fadeIn(500);
    } else {
        $('#' + x + '1_field_box, #' + x + '1_display_as_box, #field-' + x + '1, #' + x + '2_field_box, #' + x + '2_display_as_box, #field-' + x + '2, #' + x + '3_field_box, #' + x + '3_display_as_box, #field-' + x + '3, #' + x + '4_field_box, #' + x + '4_display_as_box, #field-' + x + '4, #' + x + '5_field_box, #' + x + '5_display_as_box, #field-' + x + '5').fadeOut(500);
    }
}

并称其为

ShowIfOther1('a');

此外，我建议为每个单独的#id 使用相同的 class 名称，并使用 jQuery parent() 方法，您可以 show/hide 使用非常少的代码轻松实现。

如何优化 jquery 函数将字母连接到标识符

how to optimize a jquery function concatenating letter to identidicator

parameters

jquery