javascript - show()和hide()应该怎么显示？会不会出现bug，能不能提前有个解决方案（防患于未然）？

Question

逻辑图

后台也只给了三种判断审核中，审核通过，审核不通过
我现在这样去显示内容，后期会不好出现bug，show应该放在前面，还是最后面？

if(object.certificate_state == 1){
  $("u-Authentication").hide();//认证页面
  $("u-InTheReview").show();//审核中
  $("u-Approved").hide();//审核通过
  $("u-AuditDidNotPass").hide();//审核不通过
}else if(object.certificate_state == 2){
  $("u-Authentication").hide();//认证页面
  $("u-InTheReview").hide();//审核中
  $("u-Approved").show();//审核通过
  $("u-AuditDidNotPass").hide();//审核不通过
}else if(object.certificate_state == 3){
  $("u-Authentication").hide();//认证页面
  $("u-InTheReview").hide();//审核中
  $("u-Approved").hide();//审核通过
  $("u-AuditDidNotPass").show();//审核不通过
}else{
  $("u-Authentication").show();//认证页面
  $("u-InTheReview").hide();//审核中
  $("u-Approved").hide();//审核通过
  $("u-AuditDidNotPass").hide();//审核不通过
}  

现在改成这样了

Answer 1

泻药。

你代码写的有点复杂，第一眼望过去就晕了。

正如前面两楼所说的，改用addClass的方式来处理更好些。

假设你四个页面模块都给了class: page, 然后我们定义样式：

.page{
    display:none;
}
.page.show{
    display:block;
}

那么js大概就这么写了：

 $(".page.show").removeClass('show');
if(object.certificate_state == 1){
  $("u-InTheReview").addClass('show');//审核中  //等等，这选择器不对吧= =
}else if(object.certificate_state == 2){
  $("u-Approved").addClass('show');
}else if(object.certificate_state == 3){
  $("u-AuditDidNotPass").addClass('show');
}else{
  $("u-Authentication").addClass('show');
}  

至于如果按照你原来代码的问题，show放前还是放后，好像差别不是很大，一般也是先隐藏所有然后才显示主要页面

Answer 2

代码冗余, 看着很乱.
我不知道你这片代码的逻辑究竟如何,
首先可以按照如下来控制:

    $("u-Authentication").hide(); //认证页面
    $("u-InTheReview").hide(); //审核中
    $("u-Approved").hide(); //审核通过
    $("u-AuditDidNotPass").hide(); //审核不通过
if (object.certificate_state == 1) {
    $("u-InTheReview").show(); //审核中
} else if (object.certificate_state == 2) {
    $("u-Approved").show(); //审核通过
} else if (object.certificate_state == 3) {
    $("u-AuditDidNotPass").show(); //审核不通过
} else {
    $("u-Authentication").show(); //认证页面
}

其次需要根据你的业务逻辑, 来判断, 没用的直接remove掉以后也不需要考虑它的show hide

ps: show hide和addClass removeClass在视图上是一样的, 代码习惯而已只不过后者看起来优雅一点, 更被接受而已

Answer 3

你这样用js来一个个控制显示和隐藏, 会死人的!!
建议用class来控制

if (xx) {
  xxx.addClass('xxx').removeClass('xxx2')
}

.xxx {
  .a {display: none}
  .b {display: block}
}

Answer 4

u-Authentication是忘写点了吧。

addclass没生效，show了。是因为show和hide是增加的行内样式。优先级高。addclass是用的class类名带来的样式

Answer 5

hide ()jq 最新版本不支持了