Question

有没有更好的方法让我在jQuery中优化以下IF语句？

我必须编辑以下代码几次，如果我可以在一个漂亮的数组中插入必要的值，那就太好了......

 $("#pmselect").change(function () {
        if ($("#pmselect option:selected").attr("class") == "null") {
            $('.avatar').hide();
            $('.pmpass').hide();
            $('.pmlogin').hide();
            $('#nullavatar').show();
        }
        if ($("#pmselect option:selected").attr("id") == "pm") {
            $('.avatar').hide();
            $('.pmpass').show();
            $('.pmlogin').show();
            $('#pmavatar').show();
        }
        if ($("#pmselect option:selected").attr("id") == "as") {
            $('.avatar').hide();
            $('.pmpass').show();
            $('.pmlogin').show();
            $('#asavatar').show();
        }
        if ($("#pmselect option:selected").attr("id") == "pn") {
            $('.avatar').hide();
            $('.pmpass').show();
            $('.pmlogin').show();
            $('#pnavatar').show();
        }
        if ($("#pmselect option:selected").attr("id") == "jm") {
            $('.avatar').hide();
            $('.pmpass').show();
            $('.pmlogin').show();
            $('#jmavatar').show();
        }
        if ($("#pmselect option:selected").attr("id") == "mh") {
            $('.avatar').hide();
            $('.pmpass').show();
            $('.pmlogin').show();
            $('#mhavatar').show();
        }
        if ($("#pmselect option:selected").attr("id") == "rh") {
            $('.avatar').hide();
            $('.pmpass').show();
            $('.pmlogin').show();
            $('#rhavatar').show();
        }
        if ($("#rmselect option:selected").attr("id") == "rm") {
            $('.avatar').hide();
            $('.pmpass').show();
            $('.pmlogin').show();
            $('#rmavatar').show();
        }
    });

Answer 1

你可以使用switch / case，这样你可以整合一些在多种情况下完成的事情......

switch( $("#pmselect option:selected").attr("id") ){
  case 'pm':
    //do stuff
    break;
  case 'xyz':
  case 'rh':
   //do stuff for xyz and rh
  case 'mh': 
   // do stuff for mh only
   break;
}

Answer 2

试试这个：

$("#pmselect").change(function () {
        $('.avatar').hide();
        if ($("#pmselect option:selected").attr("class") == "null") {
            $('.pmpass, .pmlogin').hide();
            $('#nullavatar').show();
        } else {
            var id = $("#pmselect option:selected").attr("id");
            $('.pmpass, .pmlogin').show();
            $('.pmlogin').show();
            $('#' + id + 'avatar').show();
        }
    });

Answer 3

假设最后一个if表达式中的$("#rmselect option:selected")是一个拼写错误（归功于eagle-eyed @RaymondChen），我想你会发现代码简化为：

$("#pmselect").change(function () {
    var opt = this[this.selectedIndex],
        isNull = $(opt).hasClass('null'),
        id = isNull ? 'null' : opt.id;
    $('.avatar').hide();
    $('.pmpass, .pmlogin')[isNull ? 'hide' : 'show']();
    $('#' + id + 'avatar').show();
});

看不到if：）

如果$("#rmselect option:selected")不是拼写错误，则#rmselect条件需要单独处理。

优化IF语句的更好方法

3 个答案: