Tajuk yang ditulis semula: Menggulung pada senarai HTML
P粉221046425
P粉221046425 2023-09-09 18:34:42
0
2
639

Saya mahukan kod JS yang menggelung melalui satu siri item senarai dan untuk setiap item senarai ia menyimpan nilai atribut unik (dalam kes ini, href) dan kemudian memasukkannya ke dalam satu lagi dalam item senarai yang sama Dalam elemen (dalam kes ini, butang). Kod JS semasa saya hanya berfungsi pada item senarai pertama, bukan keseluruhan siri. Bolehkah pendekatan saya diubah suai, atau adakah ia perlu diubah suai?

<li class="productgrid--item">
  <a class="productitem--image-link" href="www.link_one.com">link one</a>
  <button class="atc-button--text">button one</button>
</li>
<li class="productgrid--item">
  <a class="productitem--image-link" href="www.link_two.com">link two</a>
  <button class="atc-button--text">button two</button>
</li>
<li class="productgrid--item">
  <a class="productitem--image-link" href="www.link_three.com">link three</a>
  <button class="atc-button--text">button three</button>
</li>
document.querySelectorAll('.productgrid--item').forEach(function(node) {
  var anchorHref = document.querySelector('.productitem--image-link').getAttribute('href');
  var addToCart = document.querySelector('.atc-button--text');
  addToCart.setAttribute('data', anchorHref);
});

P粉221046425
P粉221046425

membalas semua(2)
P粉302160436

Akan lebih mudah untuk diikuti jika anda menggunakan nod foreach dan dapatkan serta tetapkan sifat yang diperlukan dari sana

  document.querySelectorAll('.productgrid--item').forEach(function(node) {
  var anchorHref = node.querySelector('.productitem--image-link').getAttribute('href');
  var addToCart = node.querySelector('.atc-button--text');
  addToCart.setAttribute('data', anchorHref);
  console.log(addToCart)
});
 
  
<li id='a' class="productgrid--item">
  <a id='a1' class="productitem--image-link" href="www.link_one.com">link one</a>
  <button class="atc-button--text">button one</button>
</li>
<li id='b' class="productgrid--item">
  <a class="productitem--image-link" href="www.link_two.com">link two</a>
  <button class="atc-button--text">button two</button>
</li>
<li id='c' class="productgrid--item">
  <a class="productitem--image-link" href="www.link_three.com">link three</a>
  <button class="atc-button--text">button three</button>
</li>
P粉270891688

dalamforEach()中,你应该使用node.querySelector()而不是document.querySelector().

Lihat https://jsfiddle.net/qkd37rsu/

document.querySelector()在整个文档树中选择并返回第一个匹配的元素,而node.querySelector()仅在node元素的子树中搜索(并返回第一个匹配的元素)。请注意,node只是由forEach(function(node){...})Parameter yang disediakan.

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan