Question

我有一个关于shortand if else语句的问题。我只是想学习如何缩短我的js if else声明。任何人都可以使用我的代码在示例中帮助我？

我正在检查代码，如果单击按钮rel =“Like”或其他文本，然后使用if else语句执行某些操作。

if (REL === 'Like') {
   if (!$('#pli' + dataid).length) {
      $('#ttl' + dataid).prepend('<div class="pli" id="pli' + dataid + '"></div>');
   }
} else if (REL === 'Love') {
   if (!$('#plo' + dataid).length) {
      $('#ttl' + dataid).prepend('<div class="plo" id="plo' + dataid + '"></div>');
   }
}else if (REL === 'Unbelievable') {
   if (!$('#phi' + dataid).length) {
      $('#ttl' + dataid).prepend('<div class="phi" id="phi' + dataid + '"></div>');
   }
}else if (REL === 'Spectacular') {
   if (!$('#pha' + dataid).length) {
      $('#ttl' + dataid).prepend('<div class="pha" id="pha' + dataid + '"></div>');
   }
}else if (REL === 'Emotional') {
   if (!$('#pwo' + dataid).length) {
      $('#ttl' + dataid).prepend('<div class="pwo" id="pwo' + dataid + '"></div>');
   }
}

if (REL === 'NotLike') {
   setTimeout(function() {
      if ($("#sum" + dataid).text() == 0) {
         $("#pli" + dataid).remove();
      }
   }, 200);
}else if (REL === 'NotLove') {
   setTimeout(function() {
      if ($("#sum" + dataid).text() == 0) {
         $("#plo" + dataid).remove();
      }
   }, 200);
}else if (REL === 'NotUnbelievable') {
   setTimeout(function() {
      if ($("#sum" + dataid).text() == 0) {
         $("#phi" + dataid).remove();
      }
   }, 200);
}else if (REL === 'NotSpectacular') {
   setTimeout(function() {
      if ($("#sum" + dataid).text() == 0) {
         $("#pha" + dataid).remove();
      }
   }, 200);
}else if (REL === 'NotEmotional') {
   setTimeout(function() {
      if ($("#sum" + dataid).text() == 0) {
         $("#pwo" + dataid).remove();
      }
   }, 200);
}

Answer 1

如何使用如下字典：

var dict = {'Like': 'pli','Love': 'plo','Unbelievable':'phi','Emotional':'pwo'};

if (dict[REL]) {
  if (!$('#'+dict[REL] + dataid).length) {
    $('#ttl' + dataid).prepend('<div class="' + dict[REL] + '" id="'+ dict[REL] + dataid + '"></div>');
  }
}

它可以帮助您缩小两个ifs的大小

Answer 2

我认为object比switch或if/else更具可读性。

var map = {
  Like: 'pli',
  Love: 'plo',
  Unbelievable: 'phi',
  Spectacular: 'pha',
  Emotional: 'pwo'
};

var className = map[REL];

if (className) {
  if (!$('#' + className + dataid).length) {
     $('#ttl' + dataid).prepend('<div class="' + className + '" ' +
                                     'id="' + className + dataid + '"></div>');
  }
}

Answer 3

Switch绝对有助于使代码更清晰，更易读。另外我建议制作一张地图，很多代码都是重复的。

下面的

是一个例子

if ( [ 'Like', 'Love', 'Unbelievable', 'Spectacular', 'Emotional' ].indexOf( REL ) !== -1 ) {
    var map = { 'Like': 'pli', 'Love': 'plo', 'Unbelievable': 'phi' };
    if ( !$( '#' + map[ REL ] + dataid ).length ) {
        $( '#ttl' + dataid).prepend( '<div class="' + map[ REL ] + '" id="' + map[ REL ] + dataid + '"></div>' );
    }
}

if ( [ 'NotLike', 'NotLove', 'NotUnbelievable', 'NotSpectacular', 'NotEmotional' ].indexOf( REL ) !== -1 ) {
    var map = { 'NotLike': 'pli', 'NotLove': 'plo', 'NotUnbelievable': 'phi' };
    setTimeout( function () {
        if ( $('#sum' + dataid).text() == 0 ) {
            $( '#' + map[ REL ] + dataid ).remove();
        }
    }, 200 );
}

Answer 4

正如其他人所说，你想要一个 switch-case 语句：

switch (REL){
    case 'Like':
        if (!$('#pli' + dataid).length) {
            $('#ttl' + dataid).prepend('<div class="pli" id="pli' + dataid + '"></div>');
        break;
    case 'Love':
        if (!$('#plo' + dataid).length) {
            $('#ttl' + dataid).prepend('<div class="plo" id="plo' + dataid + '"></div>');
        break;
    case 'Unbelievable':
        if (!$('#phi' + dataid).length) {
            $('#ttl' + dataid).prepend('<div class="phi" id="phi' + dataid + '"></div>');
        break;
    case 'Spectacular':
        if (!$('#pha' + dataid).length) {
            $('#ttl' + dataid).prepend('<div class="pha" id="pha' + dataid + '"></div>');
        break;
    case 'Emotional':
        if (!$('#pwo' + dataid).length) {
            $('#ttl' + dataid).prepend('<div class="pwo" id="pwo' + dataid + '"></div>');
        break;
    case 'NotLike':
        setTimeout(function() {
            if ($("#sum" + dataid).text() == 0) {
                $("#pli" + dataid).remove();
            }
        }, 200);
        break;
    case 'NotLove':
        setTimeout(function() {
            if ($("#sum" + dataid).text() == 0) {
                $("#plo" + dataid).remove();
            }
        }, 200);
        break;
    case 'NotUnbelievable':
        setTimeout(function() {
            if ($("#sum" + dataid).text() == 0) {
                $("#phi" + dataid).remove();
            }
        }, 200);
        break;
    case 'NotSpectacular':
        setTimeout(function() {
            if ($("#sum" + dataid).text() == 0) {
                $("#pha" + dataid).remove();
            }
        }, 200);
        break;
    case 'NotEmotional':
        setTimeout(function() {
            if ($("#sum" + dataid).text() == 0) {
                $("#pwo" + dataid).remove();
            }
        }, 200);
        break;
    default:
        //do something or nothing
}

我可以在我的代码中使用shortand if else语句吗？

4 个答案: