把这两个函数写成传参的方式，边框属性那块和图片链接的那个P那块怎么写参数啊？

Question

var middle_ul = document.getElementById('middle_ul'); var middle_li = middle_ul.getElementsByTagName('li'); var middle_img = middle_ul.getElementsByTagName('img'); for (var i = 0; i < middle_li.length; i++) { middle_li[i].index = i; middle_li[i].addEventListener('mouseover',function () { middle_img[this.index].style.border = '1px solid #ff649d'; x = parseInt(this.index); if (x < 9) { middle_img[this.index].src = 'images/n0'+(this.index+1)+'p.png'; } else { middle_img[this.index].src = 'images/n'+(this.index+1)+'p.png'; } }) middle_li[i].addEventListener('mouseout',function () { middle_img[this.index].style.border = '1px solid #000'; x = parseInt(this.index); if (x < 9) { middle_img[this.index].src = 'images/n0'+(this.index+1)+'.png'; } else { middle_img[this.index].src = 'images/n'+(this.index+1)+'.png'; } }) }

Answer 1

var middle_ul = document.getElementById('middle_ul');
var middle_li = middle_ul.getElementsByTagName('li');
var middle_img = middle_ul.getElementsByTagName('img');
for (var i = 0; i < middle_li.length; i++) {
    middle_li[i].index = i;
     
    middle_li[i].addEventListener('mouseover',function () {
        setStyle(this, this.index, 'p', '#ff649d');
    })
    middle_li[i].addEventListener('mouseout',function () {
        setStyle(this, this.index, '', '#000');
    })
}

function setStyle(elem, idx, img, color) {
    elem[idx].style.border = '1px solid '+color;
    var x = parseInt(idx);
    if (x < 9) {
        elem[idx].src = 'images/n0'+(idx+1)+img+'.png';
    } else {
        elem[idx].src = 'images/n'+(idx+1)+img+'.png';
    }
}