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>

    <div class="flex-w flex-r-m p-b-10">
        <div class="size-204 flex-w flex-m respon6-next">
            <div class="wrap-num-product flex-w m-r-20 m-tb-10">
                <div class="btn-num-product-down cl8 hov-btn3 trans-04 flex-c-m">
                </div>

                <input class="mtext-104 cl3 txt-center num-product" type="number" name="num-product" value="1">
                <div class="btn-num-product-up cl8 hov-btn3 trans-04 flex-c-m">
                </div>
            </div>

            <button data-selly-product="3cffe13b" 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>
        </div>
    </div>  
</div>

我正在尝试更改此ID：

<button data-selly-product="3cffe13b"

取决于用户在此处选择的内容：

<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>

我尝试将选择的选项解析为一个名为value的javascript变量：

<div class="size-204 respon6-next">
    <div class="rs1-select2 bor8 bg0">
        <script type="text/javascript">
            function getComboA(selectObject) {
                var value = selectObject.value;  
            }
        </script>
        <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>
        <div class="dropDownSelect2"></div>
    </div>
</div>

然后将该值存储在cookie中：

<script type="text/javascript">
    $(document).ready(function () {
        createCookie("value", value, "1");
    });

    function createCookie(name, value, days) {
        var expires;
        if (days) {
            var date = new Date();
            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
            expires = "; expires=" + date.toGMTString();
        } else {
            expires = "";
        }
        document.cookie = escape(name) + "=" + escape(value) + expires + "; path=/";
    }
</script>

然后使该值在数据独立产品中回显：

<button data-selly-product="<?php if(isset($_COOKIE["value"])) echo $_COOKIE["value"]; ?>" class="flex-c-m stext-101 cl0 size-101 bg1 bor1 hov-btn1 p-lr-15 trans-04">Add to cart</button>

Answer 1

要仅设置data-selly-product的{{1}}属性，必须使用.dataset property。从链接中引用：

JavaScript中的自定义数据属性的名称是相同的HTML属性，但是在camelCase中，没有破折号，点等。

button

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

将option的值解析为html属性

1 个答案: