Question

我想将char x作为参数传递给以下函数（x = a）

我想使用char变量"#a1_field_box"替换x之类的所有标识符

如何使用var "#a1_field_box"改变x？所以如果参数是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()

.show().fadeIn(500)是多余的。它可以在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使用相同的类名，并使用jQuery parent()方法，您可以使用非常少的代码轻松显示/隐藏。

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

1 个答案: