4个div里每个均有4张图片,如何根据不同的state状态显示/隐藏图片,从而使每个div只显示该state对应的图片?

依依雨柔
  • 233
<div id="imageState">
    <img class="stamp worked" src="./IMG/已入职.svg"/>
    <img class="stamp hired" src="./IMG/已录用.svg"/>
    <img class="stamp commu" src="./IMG/沟通中.svg"/>
    <img class="stamp out" src="./IMG/已淘汰.svg"/>
</div>
 var stat=data[item].status;
 var imgCls = 'c'+stat;
 $('#imageState').attr('class', imgCls);
 //var imgCls=$('#imageState').attr('class')
 if(imgCls==='c0'){
    $('.worked').show();
 }else if(imgCls==='c1'){
    $('.hired').show();
  }else if(imgCls==='c2'){
    $('.commu').show();
  }else{
      $('.out').show();
  }

为什么这个实现不了效果?

回复
阅读 1.7k
4 个回答
ezmo
  • 7k
✓ 已被采纳

Js写的有些多余! 仔细看看你定义的样式再结合你的html结构,当容器imageState的class被设定为 c0或c1或c2或c3时,相应的图片自然会展示出来(css决定的),其它的默认隐藏。
根本不需要画蛇添足的 if .... $('.xxx').show(); 你唯一可能需要js做的是指定好imageState的class是什么。

    .c0 .worked{ display: block; } 
    .c1 .hired{ display: block; } 
    .c2 .comu{ display: block; } 
    .c3 .out{ display: block; }

对应的Html结构

    <div id="imageState">
      <img class="stamp worked" src="./IMG/已入职.svg" />
      <img class="stamp hired" src="./IMG/已录用.svg" />
      <img class="stamp commu" src="./IMG/沟通中.svg" />
      <img class="stamp out" src="./IMG/已淘汰.svg" />
    </div>
我没有看错的话,你的这个css方案用的是我回答你另外一个问题“《css样式污染》”中给出的解决方案,但是没见你采纳。

顺带说一句,上面的css样式可以简写成

.c0 .worked,.c1 .hired, .c2 .comu, .c3 .out{ display: block; } 
hcxowe
  • 1.4k

经测试,你的代码是可以的, 你的图片被你往上偏了

墨绿青苔
  • 482
$('img').eq(stat).show().siblings().hide()

先把图片都隐藏起来,然后根据state 给对应的图片添加一个class,控制显示

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏