我有一些标签元素 <a class="banner2">每个人都有不同的background image网址和 href值(value)。
<a href="#" target="_blank" class="banner2" style="background-image:url('<?php echo get_template_directory_uri(); ?>/images/koniaris.jpg');">
</a>
我也有相同数量的不同元素<a class="banner3">我希望分别具有相同的背景图像和 href 值。
<a href="#" target="_blank" class="banner3">
</a>
我的意思是对于每个 .banner2我想要一个相应的元素 .banner3元素具有其背景图像 url 和 href 值。
那么我该如何循环两个类并复制属性值呢？
最佳答案
您可以这样尝试，CSS 大小只是为了让元素在测试期间出现，而红色边框只是为了识别哪个是哪个。
捕获对要设置背景的类 banner3 的所有元素的引用，并捕获要从中选择背景图像的所有元素的节点列表。遍历节点列表并根据索引 i 选择相应的其他节点 - 分配背景。
这仅显示正在复制的背景图像 - 由于 href 属性相同，因此复制该属性似乎没有多大意义，但这样做是一项微不足道的任务。
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>Copy background image to corresponding element</title>
<script>
document.addEventListener('DOMContentLoaded',()=>{
let col=Array.prototype.slice.call( document.querySelectorAll('a.banner3') );
Array.prototype.slice.call( document.querySelectorAll('a.banner2') ).forEach( ( a, i )=>{
col[ i ].style.backgroundImage=a.style.backgroundImage;
})
});
</script>
<style>
.banner2, .banner3{ display:block; width:300px; height:300px; margin:1rem; }
.banner3{ border:1px solid red; }
</style>
</head>
<body>
<a href="#" target="_blank" class="banner2" style="background-image:url('images/25398691_10214872887759191_3871602197915899055_n.jpg');"></a>
<a href="#" target="_blank" class="banner2" style="background-image:url('images/27972581_10157094423021258_4761504312023581045_n.jpg');"></a>
<a href="#" target="_blank" class="banner2" style="background-image:url('images/183096_1908068104875_1336992821_2226175_4522067_n.jpg');"></a>
<a href="#" target="_blank" class="banner3"></a>
<a href="#" target="_blank" class="banner3"></a>
<a href="#" target="_blank" class="banner3"></a>
</body>
</html>
关于javascript - 如何从多个元素复制属性值并将每个元素复制到不同的元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58507174/