下拉框选框设置了change监听, 前一个相邻的input元素无法获取值

12style
  • 38

油猴鼠标拖拽脚本,初次安装后打开设置界面,搜索引擎文本框和下拉框设置了监听,对下面的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);
            }
        }
回复
阅读 349
1 个回答

监听父元素中新元素增加,然后change正常了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏