javascript - 使用带有 Javascript 的 getAttribute 和 innerText 创建新的 href 属性
问题描述
我有一个产品列表,我想做的是使产品的价格可以点击,就像链接到同一产品 URL 的产品标题一样。
我创建了一个 for 循环来尝试执行此操作,但我遇到的问题是每个产品的每个 href 链接都是针对每个产品创建的,而我只需要一个带有相应 href 链接的价格。我该如何纠正?
注意:我无权更改原始 html,这就是我尝试在 javascript 中进行这些更改的原因
var getAllLinks = document.querySelectorAll('.productTitle').forEach(function(el){
var createNewLinks = document.querySelectorAll('.productPrice').forEach(function (elem){
elem.insertAdjacentHTML("afterend", "<a href=" + el.getAttribute('href') + ">"+ elem.innerText +"</a>");
})
});
.container {padding-bottom: 20px;}
<article class="container" data-ga-product="04245">
<div class="productContent">
<a class="productTitle" href="#product1">Product 1</a>
<div class="productPriceContainer">
<div class="productPrimary">
<span class="productPrice">€&nbsp;5,90</span>
</div>
</div>
</div>
</article>
<article class="container" data-ga-product="05395">
<div class="productContent">
<a class="productTitle" href="#product2">Product 2</a>
<div class="productPriceContainer">
<div class="productPrimary">
<span class="productPrice">€&nbsp;145,90</span>
</div>
</div>
</div>
</article>
<article class="container" data-ga-product="263743">
<div class="productContent">
<a class="productTitle" href="#product3">Product 3</a>
<div class="productPriceContainer">
<div class="productPrimary">
<span class="productPrice">€&nbsp;35,90</span>
</div>
</div>
</div>
</article>
<article class="container" data-ga-product="60493">
<div class="productContent">
<a class="productTitle" href="#product4">Product 4</a>
<div class="productPriceContainer">
<div class="productPrimary">
<span class="productPrice">€&nbsp;125,90</span>
</div>
</div>
</div>
</article>
解决方案
我不太确定你的问题,但我想这也许就是你想要的。
如果我弄错了,请告诉我:)
var getLink = document.querySelectorAll('.productTitle');
var newLink = document.querySelectorAll('.productPrice');
getLink.forEach((link, i) => {
newLink[i].insertAdjacentHTML("afterend", "<a href=" + link.getAttribute('href') + ">" + newLink[i].innerText + "</a>");
newLink[i].remove();
});
.container {padding-bottom: 20px;}
<article class="container" data-ga-product="04245">
<div class="productContent">
<a class="productTitle" href="#product1">Product 1</a>
<div class="productPriceContainer">
<div class="productPrimary">
<span class="productPrice">€&nbsp;5,90</span>
</div>
</div>
</div>
</article>
<article class="container" data-ga-product="05395">
<div class="productContent">
<a class="productTitle" href="#product2">Product 2</a>
<div class="productPriceContainer">
<div class="productPrimary">
<span class="productPrice">€&nbsp;145,90</span>
</div>
</div>
</div>
</article>
<article class="container" data-ga-product="263743">
<div class="productContent">
<a class="productTitle" href="#product3">Product 3</a>
<div class="productPriceContainer">
<div class="productPrimary">
<span class="productPrice">€&nbsp;35,90</span>
</div>
</div>
</div>
</article>
<article class="container" data-ga-product="60493">
<div class="productContent">
<a class="productTitle" href="#product4">Product 4</a>
<div class="productPriceContainer">
<div class="productPrimary">
<span class="productPrice">€&nbsp;125,90</span>
</div>
</div>
</div>
</article>
推荐阅读
- javascript - 反转游戏经验公式以显示一个级别需要多少经验
- javascript - 波斯电话号码正则表达式
- c++ - 优雅地取消 boost::asio::async_read
- python - ValueError:需要超过 0 个值才能解压(Python 2)
- r - 在R中解压缩和提取文件
- jquery - jquery中的parseFloat没有选择每个十进制值
- python - Django {% extends %} 模板的问题
- javascript - 如何从dataTransfer获取数据作为对象?
- momentjs - 是否可以计算 Luxon 中“当前半小时”的开始?
- assembly - 执行后保存在相应寄存器中的值