将选项的值解析为 html 属性

Question

我目前正在尝试制作一个使用 Selly.io 的电子商务网站。但是我最近一直在尝试根据他们想要购买的产品的大小来更改产品 ID（用于告诉 Selly.io 用户正在购买什么）。这是我正在谈论的代码的一部分：<div class="col-md-6 col-lg-5 p-b-30">    <div class="p-r-50 p-t-5 p-lr-0-lg">    <h4 class="mtext-105 cl2 js-name-detail p-b-14">        Hoodie    </h4>    <span class="mtext-106 cl2">        €50,00</span>    <p class="stext-102 cl3 p-t-23">Nulla eget sem vitae eros pharetra viverra. Nam vitae luctus ligula. Mauris consequat ornare feugiat.    </p>    <div class="p-t-33">        <div class="flex-w flex-r-m p-b-10">            <div class="size-203 flex-c-m respon6">                Size            </div>            <div class="size-204 respon6-next">                <div class="rs1-select2 bor8 bg0">                <select class="js-select2" name="time">                    <option>Choose an option</option>                    <option>Size S</option>                    <option>Size M</option>                    <option>Size L</option>                    <option>Size XL</option>                </select>                <div class="dropDownSelect2"></div>            </div>        </div>    </div>    <div class="flex-w flex-r-m p-b-10">        <div class="size-203 flex-c-m respon6">            Color        </div>        <div class="size-204 respon6-next">            <div class="rs1-select2 bor8 bg0">                <select class="js-select2" name="time">                    <option>Choose an option</option>                    <option>Blue</option>                    <option>White</option>                    <option>Grey</option>                </select>                <div class="dropDownSelect2"></div>            </div>        </div>    </div>

Answer 1

刚才设置data-selly-product的属性button，你必须使用.dataset属性。从链接引用：

JavaScript 中的自定义数据属性的名称是相同的 HTML 属性的名称，但采用驼峰命名，并且没有破折号、点等。

function getComboA(selectObject) {

  const button = document.querySelector('button.js-addcart-detail');

  button.dataset.sellyProduct = selectObject.value;

  console.log(button);

}

<select class="js-select2" name="time" id="comboA" onchange="getComboA(this)">

  <option value="">Choose an option</option>

  <option value="3cffe13b">Size S</option>

  <option value="M">Size M</option>

  <option value="L">Size L</option>

  <option value="XL">Size XL</option>

</select>

<button class="flex-c-m stext-101 cl0 size-101 bg1 bor1 hov-btn1 p-lr-15 trans-04 js-addcart-detail">Add to cart</button>

onchange我建议不使用属性，而是将其移至单独的文件并使用侦听器。这使您可以更好地将逻辑与表示分离，并且您可以向同一个元素添加多个侦听器。你只需要在代码中做一个小的调整：

document.getElementById('comboA').addEventListener('change', function() {

  const button = document.querySelector('button.js-addcart-detail');

  button.dataset.sellyProduct = this.value; // `this` is the element receiving the event

});