背景:维护客服系统,修改问卷,从数据库读取题目和答案后动态生成页面及提示信息。
- 首先记录个bug:动态生成的input元素id使用数据库存储的题目编号,题目编号包含“.”时,即:4.1等。此时id选择器$("#4.1")在低版本是无效的,高版本不了解。最后使用曲线救国的方式:
$("#3").parent().next().find('div[class="layui-input-block"]').eq(1).after("<p style='color:blue'> 应对话术:好点,我们这边会进行评估</p>");
其中:
parent() 父元素选择
next() 相邻元素选择(同级别)
find() 遍历符合条件元素选择:注意,不可使用find('div[class="layui-input-block"]')[1],否则会造成动态生成的页面元素变为字符串。
after() 元素后插入指定的内容,注意和append()的区别
- 原生单选框通过相同的属性name来保证单个选择切换,即:
<input type="radio" onclick="change(this)" name="que_' + question.id + '"
value = "' + question.id + answer.id + '" id = "' + question.id + answer.id + '">
function change(val){
if(val.defaultValue == '1A'){
$("input:radio[name=que_2]:eq(0)").prop("checked","checked");
}else if(val.defaultValue == '1B' || val.defaultValue == '1C'){
$("input:radio[name=que_2]:eq(0)").removeAttr("checked");
}
}
注意:不要使用removeProp() 方法来移除诸如 style、id 或 checked 之类的 HTML 属性。请使用 removeAttr() 方法代替。
- 其他的选择方法:
$("#xxx").parent().find('span')[1].text();
$("#xxx").parent().find('input[class="add"]');
$("input[type='radio'][name='audit']:checked");