css样式污染?

依依雨柔
  • 233

<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,上述存在类污染,如何解决?
回复
阅读 1.8k
3 个回答
以乐之名
  • 3.9k
// css
.a,.b,.c,.d {
 display: none;
}
// num为判定值,也为索引
var matchList = ['a','b','c','d'];
$('.'+matchList[num]).show().siblings().hide();

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

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

ezmo
  • 7k

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