重构函数

Question

Me需要获取html一个元素并覆盖另一个元素。我有这个功能：

function ratings() {
const divInWrapper = document.getElementById("auto-mag-id");
const shortcode = document.getElementById("auto-mag");
divInWrapper.innerHTML = shortcode.innerHTML;
const divInWrapper2 = document.getElementById("karat-id");
const shortcode2 = document.getElementById("karat");
divInWrapper2.innerHTML = shortcode2.innerHTML;
const divInWrapper3 = document.getElementById("zebra-id");
const shortcode3 = document.getElementById("zebra");
divInWrapper3.innerHTML = shortcode3.innerHTML;
}

页面上有很多这样的元素，如何重构这个函数，也许这个"对于"；？

HTML 示例

<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit, at?</div>
<div id="auto-mag-id">Lorem ipsum dolor sit amet.</div>
<div id="karat-id">Lorem ipsum dolor sit amet.</div>
<div id="zebra-id">Lorem ipsum dolor sit amet.</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit, at?</div>
<div id="auto-mag">Need this text in div this id auto-mag-id</div>
<div id="karat">Need this text in div this id karat-id</div>
<div id="zebra">Need this text in div this id zebra-id</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit, at?</div>

Answer 1

我会重构HTML，使id元素都在一个容器中，而目标元素在不同的容器中。然后你所要做的就是迭代孩子的标记：

const targetContainer = document.querySelector('.target-container');
document.querySelectorAll('.orig-container > div').forEach((div, i) => {
targetContainer.children[i].textContent = div.textContent;
});

<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit, at?</div>
<div class='orig-container'>
<div>Lorem ipsum dolor sit amet 1.</div>
<div>Lorem ipsum dolor sit amet 2.</div>
<div>Lorem ipsum dolor sit amet 3.</div>
</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit, at?</div>
<div class='target-container'>
<div id="auto-mag">Need this text in div this id auto-mag-id</div>
<div id="karat">Need this text in div this id karat-id</div>
<div id="zebra">Need this text in div this id zebra-id</div>
</div>

Answer 2

类似的东西？

使用相关类或数据属性可以更安全

const ratings = () => {
[...document.querySelectorAll("[id$='-id']")].forEach(divInWrapper => {
console.log(divInWrapper.id.split("-id")[0])
const shortcode = document.getElementById(divInWrapper.id.split("-id")[0]);
divInWrapper.innerHTML = shortcode.innerHTML;
});
};
ratings()

<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit, at?</div>
<div id="auto-mag-id">Lorem ipsum dolor sit amet.</div>
<div id="karat-id">Lorem ipsum dolor sit amet.</div>
<div id="zebra-id">Lorem ipsum dolor sit amet.</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit, at?</div>
<div id="auto-mag">Need this text in div this id auto-mag-id</div>
<div id="karat">Need this text in div this id karat-id</div>
<div id="zebra">Need this text in div this id zebra-id</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit, at?</div>