使用带有 Javascript 的 getAttribute 和 innerText 创建新的 href 属性

Question

我有一个产品列表，我想做的是使产品的价格可以点击，就像产品标题 link 指向同一产品 URL 一样。

我已经创建了一个 for 循环来尝试执行此操作，但我遇到的问题是每个产品的每个 href link 正在为每个产品创建，我只需要一个价格和相应的 href link。我该如何纠正？

注意：我无权更改原始 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>

Answer 1

为什么不把价格包含在 a 标签中而忘记 JavaScript 呢？

<article class="container" data-ga-product="04245">
  <div class="productContent">
    <a class="productTitle" href="#product1">Product 1
      <span class="productPriceContainer">
        <span class="productPrimary">
          <span class="productPrice">€&nbsp;5,90</span>
        </span>
      </span>
    </a>
  </div>
</article>

您需要将内部 divs 更改为 spans 以具有语义 HTML，并可能进行一些 CSS 更改以使样式恰到好处，但这似乎是一种更好的解决方案。

Answer 2

我不太确定你的问题，但我想也许这就是你想要的。
如果我弄错了请告诉我:)

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 的 getAttribute 和 innerText 创建新的 href 属性

Creating a new href attribute using getAttribute & innerText with Javascript

javascript

href

getattribute