请教一下，怎么把这段代码换一个优雅的写法

[IMFFA]

如下所示，一段拼接的 html 字符串，想要根据接受到的 value 不同，给不同的 radio 加 checked 属性。
这样写实在太丑了
var value = field.value;
var checked1 = "";
var checked2 = "";
var checked3 = "";
var checked4 = "";
var checked5 = "";
var checked6 = "";
var checked7 = "";
switch(value){
case "1":
checked1 = "checked";
break;
case "2":
checked2 = "checked";
break;
case "3":
checked3 = "checked";
break;
case "4":
checked4 = "checked";
break;
case "5":
checked5 = "checked";
break;
case "6":
checked6 = "checked";
break;
case "7":
checked7 = "checked";
break;
}
var html = '<input id="cycle_type" type="radio" name="cycle_type" value="1" '+checked1+' title="日" lay-filter="cycle_type">'+
'<input id="cycle_type" type="radio" name="cycle_type" value="2" '+checked2+' title="周" lay-filter="cycle_type">'+
'<input id="cycle_type" type="radio" name="cycle_type" value="3" '+checked3+' title="半月" lay-filter="cycle_type">'+
'<input id="cycle_type" type="radio" name="cycle_type" value="4" '+checked4+' title="月" lay-filter="cycle_type">'+
'<input id="cycle_type" type="radio" name="cycle_type" value="5" '+checked5+' title="季" lay-filter="cycle_type">'+
'<input id="cycle_type" type="radio" name="cycle_type" value="6" '+checked6+' title="半年" lay-filter="cycle_type">'+
'<input id="cycle_type" type="radio" name="cycle_type" value="7" '+checked7+' title="年" lay-filter="cycle_type">';
return html;

[wszgrcy]

能用就行

[dongisking]

你是个后端吧

[IMFFA]

@dongisking 没错，我是个后端 o(╥﹏╥)o

[puzzle9]

@dongisking 赞同

[tabris17]

不要拼接 HTML，直接操作 DOM

[sagaxu]

请教一下，怎么把这坨屎换一个优雅的吃法

[Kakus]

把值放数组里面，用下标存取数据

[learnshare]

后端通常有模板化的写法，不需要拼接字符串

[berforest]

写的好看有球用，用户又看不到

[violetlai]

var someJson ={

}
$.each(someJson, function (k, v) {
//判断条件
if (){
var ele = ""//html 拼接
}
//直接加到 html 里面
$("#html").append(ele)
})

[2pen]

var checked = [false,false,false,false]; checked[value] = true

[OnlyShimmer]

let html = '';
let TimeArr = ['日','周','半月','月','季','半年','年',]
for(let i=1;i<7;i++){
if(i==field.value){
html += '<input id="cycle_type" type="radio" name="cycle_type" value="'+i+'" checked title="'+TimeArr[i]+'" lay-filter="cycle_type">'
}else{
html += '<input id="cycle_type" type="radio" name="cycle_type" value="'+i+'" title="'+TimeArr[i]+'" lay-filter="cycle_type">'
}
}
return html;
=================================
献丑

[wa143825]

let value = field.value
let h = ''
let titleArray = ['日','周','半月']
return titleArray.forEach((e,idx) => {
h += `<input id="cycle_type" type="radio" name="cycle_type" value="${idx+1}" ${v===idx+1 && 'checked'} title="${e}" lay-filter="cycle_type">`
});

[Oceanhime]

看头像还是个夏娜粉？？

你可以使用 JS 操作 DOM 动态设置，把这些 input 直接写到 html 里，不用带 checked，记得用 class 或 id 把年月日这些区分开。
用 element.checked = true 设置 element 为 checked 状态，然后用 element.removeAttribute('checked'); 移除 element 的这个属性。
然后你再根据 value 设置 checked 状态。例如：
var v = field.value;
switch(v){
case 1: document.querySelector('.select-year').checked = true; break;
case 2: document.querySelector('.select-month').checked = true; break;
}
不需要用 JS 构建 direct HTML 的。这种既乱又不好进行扩展。

[OnlyShimmer]

我来领打脸了,没有跑过就放代码,后面看到的不要抽我脸
=====
function getType(e) {
let html = '';
let TimeArr = ['日','周','半月','月','季','半年','年']
for(let i=1;i<=7;i++){
if(i==e){
html += '<input id="cycle_type" type="radio" name="cycle_type" value="'+i+'" checked title="'+TimeArr[i]+'" lay-filter="cycle_type">'
}else{
html += '<input id="cycle_type" type="radio" name="cycle_type" value="'+i+'" title="'+TimeArr[i]+'" lay-filter="cycle_type">'
}
}
return html;
}
=====

[jeodeng]

var value = field.value;

var config = [
{ value: 1, title: '日', checked: null },
{ value: 2, title: '周', checked: null },
{ value: 3, title: '半月', checked: null },
{ value: 4, title: '月', checked: null },
{ value: 5, title: '季', checked: null },
{ value: 6, title: '半年', checked: null },
{ value: 7, title: '年', checked: null },
];

config[value - 1].checked = 'checked';

var radioInit = (value, checked, title) => `<input id="cycle_type" type="radio" name="cycle_type" value="${value}" ${checked || ''} title="${title}" lay-filter="cycle_type">`;

var html = config.reduce((acc, cur) => {
return acc + radioInit(cur.value, cur.checked, cur.title);
}, '');

return html;

[ihuzhou]

编程珠玑中吐槽了这种写法。用数组。建立适用的数据结构让程序更加优美。

[IMFFA]

@13725151469wy 哈哈哈，至少你写的结构比我好看多了，不要在意细节

[IMFFA]

感谢各位大胸弟，又学到了不少

[jeodeng]

嗯...config 里面 checked: null 可以去掉...习惯预设属性了
@jeodeng