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

Question

<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();
  }

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

Answer 1

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; } 

Answer 2

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

Answer 3

$('img').eq(stat).show().siblings().hide()

Answer 4

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