油猴鼠标拖拽脚本,初次安装后打开设置界面,搜索引擎文本框和下拉框设置了监听,对下面的1,如何对新增的功能元素设置监听,直接改新增的功能下拉选框input也可以变化
1 直接改新增加的功能,前一个元素input没有变化
2 默认设置的功能选项,input可以同步变化
3 改了默认的功能选项之后,再修改新增的功能,input可以变化
Alt+Y进入设置界面
测试脚本代码
https://greasyfork.org/zh-CN/...
设置界面
function arg2html(argument, type, trk){
let html ="",
argu, i,rand, trackTxt, name,
argValue = [],
agrDetail = [],
description,
selectName;
if(typeof argument === "object")
argu = argument;
else
argu = JSON.parse(argument);
trackTxt = trk || '';
name = argu.name;
html += `<span>${name}</span><span name="alias">${argu.alias ? argu.alias : local[type][name][cfg.language]}</span><b style="visibility:${argu.arg.length ? "visible" : "hidden"};" name="toggleArgument">↑</b><input type="text" name="${name}" value="${trackTxt}" data-mark="${type}" readonly="readonly"><br/><div class="fnArgument">`;
if(argu.arg.length > 0){
argValue = trackTxt ? argu.arg : [];
agrDetail = fnLocal.arg[name].arg;
description = fnLocal.arg[name].description[cfg.language];
for(i in agrDetail){
rand = Math.floor(Math.random()*1000);
switch (agrDetail[i].slice(0,5)) {
case 'input':
html += '<span><input type="text"><i></i></span>';
break;
case 'selec':
selectName = agrDetail[i].split(':').pop();
html += `<span><input type="text" value=${argValue[i] || ''}><select name="fnSelect" onchange="console.log(this.options[this.options.selectedIndex].value);">`;
for (let k in options[selectName]){
html += `<option value=${options[selectName][k]} ${sel(argValue[i], options[selectName][k])}>${k}</option>`;
}
html += '</select></span>';
break;
default:
html = `<span style="visibility:hidden;"></span>`;
break;
}
}
}
return html + "</div>";
}
更新功能函数中添加的监听
function updateConfigUi(e){
let name = attr(e.target, 'name');
switch (name) {
default:
if(name === "alias") {
updateFns(e.target.parentElement);
} else if(name === "fnCheckbox" || name==="fnSelect"){
window.addEventListener('change', formChange, false);
}
return;
}
storage.set('cfg', cfg);
}
function formChange(event){
if(event.target.tagName === 'SELECT'){
//event.target.previousElementSibling.value = event.target.value;
if( event.target.previousElementSibling !== null) {//前input元素显示值 判断前元素
event.target.previousElementSibling.value = event.target.value;
}
updateFns(event.target.parentElement.parentElement.parentElement);
}
}
监听父元素中新元素增加,然后change正常了