时间戳

首页 > 解决方案 > 将选项的值解析为 html 属性

javascript - 将选项的值解析为 html 属性

问题描述

我目前正在尝试制作一个使用 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>

我尝试将 option selected 选项解析为名为 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>

然后使该值在 data-selly-product 中得到回显：

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

标签： javascriptphphtmlselly-api

解决方案

要设置的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
});

推荐阅读