自测魅族手机ul嵌套li标签js失效问题:可采用div嵌套option实现
样式:
.hot_list { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; } .hot_list option { text-align: center; width:30%; padding: .16rem .34rem; border:0.1rem solid #9F9F9F; /*background-color: #efeff4;*/ border-radius: .27rem; font-size: 0.9rem; margin-top: .5rem; box-sizing: border-box; } .hot_list option.hot_shop{ border:1px solid dodgerblue; }
数据动态渲染
var showPro=["有","效","沟","流","通"]; var html = ''; for (var i=0;i<showPro.length;i++) { html += '<option value="' + showPro[i] + '"> '+ showPro[i] + '</option>'; } document.getElementById('radioselectlist').innerHTML = html; $("#radioselectlist").on("click","option",function(){ console.log("$(this).attr(\"value\")"+$(this).attr("value")); $(this).toggleClass('hot_shop'); });
点击事件之后获取最终逗号分隔字符串
$(".hot_list option").each(function(){ if($(this).hasClass('hot_shop')){ console.log("impres",impression); impression+=$(this).html()+"," } });