描述：今天有个需求，比较老的后台，根据当前对应流程字段，显示对应图标
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.con{
display:flex
}
.stlit{
width:30px;
height:35px;
background-size: 100%;
color:rgba(0,0,0,0);
/* border:1px solid red; */
background-size: 30px 35px !important;
}
.jt{
background:url(images/jt.png)
}
.ks{
background:url(images/ks.png)
}
.js{
background:url(images/js.png)
}
.lis1{
background:red !important;
}
</style>
<script src="jquery-3.2.1.min.js"></script>
</head>
<body>
<div style="display:flex;width:300px;height:20px;justify-content: space-between" class="lisbut">
<div class="demo">
流程1, 流程2, 流程3
</div>
<div class="lc">流程1</div>
<div style="color:red">进行中</div>
</div>
<div style="display:flex;width:300px;height:20px;justify-content: space-between" class="lisbut">
<div class="demo">
流程2,流程4, 流程5, 流程6
</div>
<div class="lc">流程4</div>
<div style="color:red">进行中</div>
</div>
<div style="display:flex;width:300px;height:20px;justify-content: space-between" class="lisbut">
<div class="demo">
流程3,流程4, 流程2
</div>
<div class="lc">流程3</div>
<div style="color:red">进行中</div>
</div>
<div style="display:flex;width:300px;height:20px;justify-content: space-between" class="lisbut">
<div class="demo">
流程3,流程4, 流程6,流程5
</div>
<div class="lc">流程6</div>
<div style="color:red">进行中</div>
</div>
<div class="con">
</div>
</body>
</html>
<script>
$(function(){
$("body").on("click",".lisbut",function(){
$(".con").html('')
text_str = $(this).children('.demo').text()
var lcs = $(this).children('.lc').text()
console.log(lcs)
var str = text_str.replace(/\s*/g,"");
console.log(str)
console.log(str.split(','))
var list = str.split(',')
var relist = ''
relist+='<p data-text="开始" class="stlit ks">'+'开始'+'</p>'
+'<p data-text="'+'箭头'+'" class="stlit jt">'+'->'+'</p>'
for(var i = 0;i < list.length;i++){
relist+='<p data-text="'+list[i]+'" class="stlit '+list[i]+'">'+list[i]+'</p>'
+'<p data-text="'+'箭头'+'" class="stlit jt">'+'->'+'</p>'
}
relist+='<p data-text="结束" class="stlit js">'+'结束'+'</p>'
$(".con").append(relist)
var x=document.getElementsByClassName('stlit')
//展示图表：
for (var i = 0; i < x.length; i++) {
var h = x[i]
// console.log(h.innerHTML)
if(h.innerHTML == '流程1' && lcs == '流程1'){
x[i].style.background = 'url(images/1tv.png)'
}else if(h.innerHTML == '流程1'){
x[i].style.background = 'url(images/1.png)'
}else if(h.innerHTML == '流程2' && lcs == '流程2'){
x[i].style.background = 'url(images/2tv.png)'
}else if(h.innerHTML == '流程2'){
x[i].style.background = 'url(images/2.png)'
}else if(h.innerHTML == '流程3' && lcs == '流程3'){
x[i].style.background = 'url(images/3tv.png)'
$(".流程2").addClass('lis1')
}else if(h.innerHTML == '流程3'){
x[i].style.background = 'url(images/3.png)'
}else if(h.innerHTML == '流程4' && lcs == '流程4' ){
x[i].style.background = 'url(images/4tv.png)'
}else if(h.innerHTML == '流程4'){
x[i].style.background = 'url(images/4.png)'
}else if(h.innerHTML == '流程5' && lcs == '流程5'){
x[i].style.background = 'url(images/5tv.png)'
}else if(h.innerHTML == '流程5'){
x[i].style.background = 'url(images/5.png)'
}else if(h.innerHTML == '流程6' && lcs == '流程6'){
x[i].style.background = 'url(images/6tv.png)'
}else if(h.innerHTML == '流程6'){
x[i].style.background = 'url(images/6.png)'
}
$('.stlit').css({'background-size':'100%'})
// $('.stlit').text(' ')
}
})
})
</script>
网友评论