鍍金池/ 問答/HTML/ 4個div里每個均有4張圖片，如何根據(jù)不同的state狀態(tài)顯示/隱藏圖片，從而使

4個div里每個均有4張圖片，如何根據(jù)不同的state狀態(tài)顯示/隱藏圖片，從而使每個div只顯示該state對應(yīng)的圖片？

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

為什么這個實現(xiàn)不了效果？

回答
編輯回答
舊城人

Js寫的有些多余！ 仔細看看你定義的樣式再結(jié)合你的html結(jié)構(gòu)，當(dāng)容器imageState的class被設(shè)定為 c0或c1或c2或c3時，相應(yīng)的圖片自然會展示出來（css決定的），其它的默認隱藏。
根本不需要畫蛇添足的 if .... $('.xxx').show(); 你唯一可能需要js做的是指定好imageState的class是什么。

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

對應(yīng)的Html結(jié)構(gòu)

    <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; }
2018年9月7日 18:17
編輯回答
近義詞

先把圖片都隱藏起來，然后根據(jù)state 給對應(yīng)的圖片添加一個class，控制顯示

2017年5月15日 05:48
編輯回答
別瞎鬧

經(jīng)測試，你的代碼是可以的， 你的圖片被你往上偏了

2018年4月13日 04:02
編輯回答
安淺陌
$('img').eq(stat).show().siblings().hide()
2018年9月8日 06:10