Блог

Главная - Вопросы по программированию - Создание нового атрибута href с помощью getAttribute и внутреннего текста с помощью Javascript

Создание нового атрибута href с помощью getAttribute и внутреннего текста с помощью Javascript

#javascript #href #getattribute

Вопрос:

У меня есть список продуктов, и я хочу сделать так, чтобы цена продукта была доступной для кликабельности, как и название продукта, ссылающееся на тот же 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">€amp;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">€amp;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">€amp;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">€amp;nbsp;125,90</span>
      </div>
    </div>
  </div>
</article>

Ответ №1:

Я не совсем уверен в вашей проблеме, но я думаю, что, возможно, это то, чего вы хотите.
Пожалуйста, дайте мне знать, если я что-то не так понял 🙂

 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">€amp;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">€amp;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">€amp;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">€amp;nbsp;125,90</span>
      </div>
    </div>
  </div>
</article>

Ответ №2:

Почему бы вам просто не указать цену в 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">€amp;nbsp;5,90</span>
        </span>
      </span>
    </a>
  </div>
</article>

Вам нужно было бы изменить внутреннее div s на span s, чтобы оно было семантическим HTML, и, возможно, внести некоторые изменения в CSS, чтобы получить правильный стиль, но это кажется лучшим решением.

Комментарии:

1. К сожалению, у меня нет доступа для изменения любого html-кода, поэтому мне приходится делать это на javascript. Может быть, мне следовало сказать это в своем вопросе

Метки: