css样式污染？

Question

<div>

<img class="a" src="a.svg"/>
<img class="b" src="b.svg"/>
<img class="c" src="c.svg"/>
<img class="d" src="d.svg"/>

</div>
.a,.b,.c,.d{
display:none;
}
//m=num为项目中的判定条件
switch(num){

    case 0:
        $('.a').show();
        $('.b').hide();
        $('.c').hide();
        $('.d').hide();
        break;
    case 1:
        $('.a').hide();
        $('.b').show();
        $('.c').hide();
        $('.d').hide();
        break;
    case 2:
        $('.a').hide();
        $('.b').hide();
        $('.c').show();
        $('.d').hide();
        break;
    case 3:
        $('.a').hide();
        $('.b').hide();
        $('.c').hide();
        $('.d').show();
        break;
};
想每次只显示一个svg,上述存在类污染，如何解决？

Answer 1

// css
.a,.b,.c,.d {
 display: none;
}
// num为判定值，也为索引
var matchList = ['a','b','c','d'];
$('.'+matchList[num]).show().siblings().hide();

不用写太多，两行代码搞定。

Answer 2

你可以把它们的初始样式都设置成hide，
switch的时候再制定谁显示啊。

Answer 3

那些个svg外面不是还有个div吗，给它设置个类名(同时给它一个id，比如#svg-container），然后在用脚本只变换div的类名。通过提前设置的css控制不同条件下a,b,c,d的展示。

1. 先设置样式

   .a,.b.,.c,.d {
       display: none;
   }
   .c0 .a {
       display: block;
   }
   .c1 .b {
       display: block;
   }
   .c2 .c {
       display: block;
   }
   .c3 .d {
       display: block;
   }

2. 再用脚本控制div的classname

   $('#svg-container').attr('class','c'+ num);  //num为你传入的值，#svg-container是svg外面的那个div