获取元素数据-属性并将它们插入按钮中。

Question

我希望确保当我单击div (A、B、C)时，按钮的链接会发生变化，并在适当的位置获取数据属性值。我写了一个小剧本，但它不起作用，仍然没有足够的知识来理解我到底哪里出了问题。任何帮助都是欢迎的。

​

document.getElementById("product").onclick = function() {
  document.getElementById("purchase").href =
    "/?add-to-cart=" + this.data-product + 
    "&variation_id=" + this.data-id + "/";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product__items" id="product">

    <div data-id="338" data-product="A" id="uI-1" class="items-uniqueItem">A</div>
    <div data-id="339" data-product="B" id="uI-2" class="items-uniqueItem">B</div>
    <div data-id="340" data-product="C" id="uI-3" class="items-uniqueItem">C</div>

    <div class="product__items---btn">
        <a href="" id="purchase" class="btn">Button</a>
    </div><!-- btn -->

</div>

​

Answer 1

你这里有几个问题。

首先，我建议您查阅HTMLElement.dataset或jQuery的.data()文档。

此外，如果打算使用事件委托，则不能使用this引用普通事件侦听器中的事件源元素，因为它将引用委托。

由于您确实涉及到jQuery，所以您最好使用它，因为它使这更容易(请参见下面的普通JS版本)。

​

const button = $("#purchase")

$("#product").on("click", ".items-uniqueItem[data-id][data-product]", function() {
  // Due to the selector above, `this` is now the clicked `<div>`
  
  // Extract data properties
  const { product, id } = $(this).data()
  
  // Construct URL parameters
  const params = new URLSearchParams({
    "add-to-cart": product,
    "variation_id": id
  })
  
  // Set the `href`
  button.prop("href", `/?${params}/`)
})

/* this is just for visibility */
.items-uniqueItem{cursor:pointer;}#purchase{display:block;text-decoration:none;margin: 1rem;}#purchase:after{content:attr(href);display:block;color:#ccc;margin:.5rem;}

<!-- your HTML, just minified -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="product__items" id="product"><div data-id="338" data-product="A" id="uI-1" class="items-uniqueItem">A</div><div data-id="339" data-product="B" id="uI-2" class="items-uniqueItem">B</div><div data-id="340" data-product="C" id="uI-3" class="items-uniqueItem">C</div><div class="product__items---btn"><a href="" id="purchase" class="btn">Button</a></div></div>

​

一个普通的JS版本看起来会更像这样。可以使用Element.closest()定位委托的事件源。

​

const button = document.getElementById("purchase")

document.getElementById("product").addEventListener("click", e => {
  // find the required event source element
  const el = e.target.closest(".items-uniqueItem[data-id][data-product]")
  
  if (el) {
    // Extract data properties
    const { product, id } = el.dataset

    // Construct URL parameters
    const params = new URLSearchParams({
      "add-to-cart": product,
      "variation_id": id
    })

    // Set the `href`
    button.href = `/?${params}/`    
  }
})

.items-uniqueItem{cursor:pointer;}#purchase{display:block;text-decoration:none;margin: 1rem;}#purchase:after{content:attr(href);display:block;color:#ccc;margin:.5rem;}

<!-- your HTML, just minified -->
<div class="product__items" id="product"><div data-id="338" data-product="A" id="uI-1" class="items-uniqueItem">A</div><div data-id="339" data-product="B" id="uI-2" class="items-uniqueItem">B</div><div data-id="340" data-product="C" id="uI-3" class="items-uniqueItem">C</div><div class="product__items---btn"><a href="" id="purchase" class="btn">Button</a></div></div>

​

正如您所看到的，它与jQuery版本并没有太大的不同，所以可能是您可能不需要jQuery

Answer 2

我个人从未使用过element.onlick = function() {...}表示法，所以我将使用element.addEventListener('click', (e) => ...)，但它应该可以使用相同的 way。

您要做的是选择具有id“产品”的对象。但是“产品”是父 os --您想要选择的元素。

如果您想要选择几个元素并对它们执行一些操作，则不能使用id属性，因为id对于html页面是唯一的。因此，您需要为此使用类。

1. 创建一个class并将该类添加到每个子类(带有data-product的子类)。
2. 选择所有具有.querySelectorAll()的子级。这是文档。这将返回一个NodeList，但它类似于一个数组。
3. 使用.forEach(item => ...)迭代列表，其中item表示列表的每个元素。
4. 在每个项目上添加一个事件侦听器(或.click，我猜)。 *theList*.forEach( (项目) => { item.addEventListener('click'，( => )=>{ event.target.href =“/?add=”+ event.target.dataset.product + "&“+ "variation_id=”+ event.target.dataset.id +“；} ) )；
5. 若要访问JS中的数据集，请使用.dataset属性。

Answer 3

首先，获取具有给定类的所有div，以便我们可以使用它们的数据。

const items = document.querySelectorAll('.items-uniqueItem');
items.forEach(item => item.addEventListener('click', (e) => console.log(e.target)))

然后在您的内部单击处理程序，您可以获得按钮引用并分配您希望从中获得的属性。