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

[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;

[minute]

用 map

[zcreg]

不管前后端都要活用数组与 MAP，代码要像裙子越短越好

[sagaxu]

const periods = ['日','周','半月','月','季','半年','年'];
const checked = 2;

const html = periods.map((v,i) => `<input id="cycle_type" type="radio" name="cycle_type" value="${i}"
${i === checked ? 'checked' : ''} title="${periods[i]}" lay-filter="cycle_type">`).join("\n")

[ncwtf]

hhh

[ncwtf]

@sagaxu 这段代码 hin 叼

[xq546247083]

用字典

[ncwtf]

<input id="radio_tmp" type="radio" name="cycle_type" lay-filter="cycle_type" style="display:none">

var value = field.value;

var radioId = 'cycle_type';
var titleArr= ["", "日", "周", "半月", "月", "季", "半年", "年"]

for(var i = 1;i < titleArr.length;i++) {
var rt = $("#radio_tmp").clone();
rt.attr("id", radioId + i);
rt.attr("value", i);
rt.attr("title", titleArr[i]);
rt.prop("checked", i == value);
rt.attr("style", "");

$("#html").append(rt);
}

老式 jQuery 法，后端专用

[kuoruan]

楼上动不动就 let const 和 箭头函数的，莫非都是默认楼主用 babel 的？

[ncwtf]

@kuoruan 我刚搜了下，浏览器不支持这种写法吗？我看写 vue 的都这么写 js

[meepo3927]

友情提示：记得把 let 和 const 换成 var

[shintendo]

@kuoruan 正儿八经进了语言标准的东西，怎么就不能用了，又不是草案语法。讨论个写法问题还得考虑 ie 兼容吗

[purensong]

@ncwtf var value = field.value; field 没定义啊

[sagaxu]

@kuoruan 2015 年之后的主流浏览器都支持这么写，至于 5 年前的老浏览器，项目不一定非要兼容

[ncwtf]

@purensong lz 也没定义啊

[wangyzj]

你一后端，这样就挺优雅了

[kumasama]

哈哈，一看就是后端码农写的---

[kumasama]

别用 es6 的写法呢，不兼容

[secondwtq]

语言只是表达计算的工具，就算楼主的项目不能用 ES6+，人肉 babel 把楼上的 Snippet 改改也能用。

[busfool]

你这是凑行数吧。感觉可以加 id 或者 class，再改变元素属性。

[aimiyooo]

恭喜你，可以和蚂蚁金服 pk 行数了