将option的值解析为html属性 [英] Parse value of option into html attribute
问题描述
我目前正在尝试制作一个使用selly.io的电子商务网站.但是我最近陷入了尝试根据他们要购买的产品大小来更改产品ID(用来告诉selly.io用户正在购买的产品)的问题.
I'm currently trying to make a ecommerce website that uses selly.io. But I recently got stuck on trying to change the product ID ( thats used to tell selly.io what the user is buying ) depending on the size of the product they want to buy.
这是我正在谈论的代码的一部分:
This is the part of the code I'm talking about:
<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:
I am trying to change this id:
<button data-selly-product="3cffe13b"
取决于用户在此处选择的内容:
Depending on what the user selects here:
<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变量:
I've tried parsing the option selected option to a javascript variable called value:
<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中:
Then storing that value in a 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>
然后使该值在数据独立产品中回显:
To then make that value be echoed in the 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>
推荐答案
要仅设置button的data-selly-product属性，您必须使用 .dataset属性.从链接中引用:
To just set the data-selly-product attribute of the button you have to use the .dataset property. Quoting from the link:
JavaScript中的自定义数据属性的名称是 相同的HTML属性，但在camelCase中，并且没有破折号，点等.
The name of a custom data attribute in JavaScript is the name of the same HTML attribute but in camelCase and with no dashes, dots, etc.
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属性，而应将其移动到单独的文件中，而应使用侦听器.这使您可以更好地将逻辑与表示分离，并且可以将多个侦听器添加到同一元素.您只需对代码进行一些小的调整:
Instead of using a onchange attribute, I'd suggest moving this to a separate file and use a listener instead. This allows you to better separate logic from presentation and you can add multiple listeners to the same element. You only have to make a small adjustement in t he code:
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
});
这篇关于将option的值解析为html属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
