将选项的值解析为 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) {&nbsp; const button = document.querySelector('button.js-addcart-detail');&nbsp; button.dataset.sellyProduct = selectObject.value;&nbsp; console.log(button);}<select class="js-select2" name="time" id="comboA" onchange="getComboA(this)">&nbsp; <option value="">Choose an option</option>&nbsp; <option value="3cffe13b">Size S</option>&nbsp; <option value="M">Size M</option>&nbsp; <option value="L">Size L</option>&nbsp; <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() {&nbsp; const button = document.querySelector('button.js-addcart-detail');&nbsp; button.dataset.sellyProduct = this.value; // `this` is the element receiving the event});