问题描述
我试图找出一种方法,我可以从一个 div 中抓取和属性,并在同一个 div 中创建一个链接,包括 src 中的属性
到目前为止我所拥有的只是获取第一个属性,因此所有链接都相同。
我是一个 JS 初学者,所以如果答案很明显,请原谅我
var srpVin = document.querySelectorAll('span[data-cg-vin]')[0].getAttribute("data-cg-vin");
var srpVsaBtn = document.getElementsByClassName('carBannerWrapper');
for (var i = 0; i < srpVsaBtn.length; i++) {
srpVsaBtn[i].innerHTML += '<a href="https://myurl.com/?vin='+srpVin+'&dealer_id=28987" target=_deal>Click here - '+srpVin+'</a>';
}
<div class="carBannerWrapper"><div><span data-cg-vin="1FMCU9G66MUA11123" data-cg-price="34399"></span></div></div>
<div class="carBannerWrapper"><div><span data-cg-vin="MAJ3S2GE7LC386456" data-cg-price="34399"></span></div></div>
<div class="carBannerWrapper"><div><span data-cg-vin="11FMCU9H67LUC59789" data-cg-price="34399"></span></div></div>
解决方法
首先使用 querySelectorAll
获取所有跨度。这将返回一个 NodeList
对象。这些对象有一个 forEach
函数来循环遍历对象内部的项目。
在循环中,每个 <span>
都是公开的。这意味着您可以访问这些元素的属性并对其进行操作。由于您使用的是数据属性,我建议您使用 dataset
属性,该属性保存每个数据属性的值。
然后不使用 innerHTML
,而是使用 document.createElement
创建新的 <a>
标签。这将创建一个锚标记作为对象。这里我们可以根据数据集的值手动设置anchor的href
属性。
然后在 span 上的 append()
方法将锚点添加为循环中当前 span 的子项。
注意:_deal
不是 target
属性的有效值。查看可能的值列表:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target
// Collect all spans with the data-cg-vin attribute.
const srpVin = document.querySelectorAll('span[data-cg-vin]');
// Loop over each span.
srpVin.forEach(span => {
// Get the data-cg-vin attribute value of the current span.
const cgVin = span.dataset.cgVin;
// Create a new <a> tag..
const anchor = document.createElement('a');
// ..and set the href,target and textContent based on the data attribute value.
anchor.href = `?vin=${cgVin}&dealer_id=28987`;
anchor.target = '_blank';
anchor.textContent = `Click here - ${cgVin}`;
// Add the anchor to the span.
span.append(anchor);
});
<div class="carBannerWrapper"><div><span data-cg-vin="1FMCU9G66MUA11123" data-cg-price="34399"></span></div></div>
<div class="carBannerWrapper"><div><span data-cg-vin="MAJ3S2GE7LC386456" data-cg-price="34399"></span></div></div>
<div class="carBannerWrapper"><div><span data-cg-vin="11FMCU9H67LUC59789" data-cg-price="34399"></span></div></div>
您似乎正在寻找 forEach(迭代节点列表):
var srpVin = document.querySelectorAll('span[data-cg-vin]').forEach(function(elem,idx) {
elem.getAttribute("data-cg-vin");
});
)
,
使用 forEach 遍历每个项目。
var srpVsaBtn = Array.from(document.querySelectorAll('.carBannerWrapper'));
srpVsaBtn.forEach(button => {
const link = button.querySelector('span').dataset.cgVin;
button.innerHTML = '<a href="https://myurl.com/?vin='+link+'&dealer_id=28987" target=_deal>Click here - '+link+'</a>';
})
<div class="carBannerWrapper"><div><span data-cg-vin="1FMCU9G66MUA11123" data-cg-price="34399"></span></div></div>
<div class="carBannerWrapper"><div><span data-cg-vin="MAJ3S2GE7LC386456" data-cg-price="34399"></span></div></div>
<div class="carBannerWrapper"><div><span data-cg-vin="11FMCU9H67LUC59789" data-cg-price="34399"></span></div></div>