我正在使用 intlTelInput 并在 woocommerce #billing_phone 字段中成功添加。 我希望当用户选择帐单国家/地区时,intlTelInput 国家/地区也会更新。同样,当用户进入结帐页面时,它会在国家/地区显示灰色标志。
视频:https://www.loom.com/share/7987af7a9388414e909d485cd313b152
这是我的 JavaScript 代码:
var legendheight = 100;
var legendwidth = 40;
var colorscale = d3.scaleSequential(d3.interpolateYlGnBu)
.domain([-4, 16]);
var legendscale = d3
.scaleLinear()
.range([0, legendheight])
.domain(colorscale.domain());
var canvas = d3
.select("body")
.style("height", legendheight + "px")
.style("width", legendwidth + "px")
.style("position", "relative")
.append("canvas")
.attr("height", legendheight)
.attr("width", 1)
.style("height", legendheight + "px")
.style("width", legendwidth + "px")
.style("border", "1px solid #000")
.style("position", "absolute")
.style("top", 10 + "px")
.style("left", 0 + "px")
.node();
var ctx = canvas.getContext("2d");
var legendscale = d3
.scaleLinear()
.range([0, legendheight])
.domain(colorscale.domain());
var image = ctx.createImageData(1, legendheight);
d3.range(legendheight).forEach(function (i) {
var c = d3.rgb(colorscale(legendscale.invert(i)));
image.data[4 * i] = c.r;
image.data[4 * i + 1] = c.g;
image.data[4 * i + 2] = c.b;
image.data[4 * i + 3] = 255;
});
ctx.putImageData(image, 0, 0);
var legendaxis = d3.axisRight()
.scale(legendscale)
.tickSize(6)
.ticks(8);
d3.select("svg")
.append("g")
.attr("class", "axis")
.attr(
"transform",
"translate(" +
legendwidth +
",10)"
)
.call(legendaxis);
d3.select("svg")
.selectAll("rect")
.data(d3.range(30).map(function(d,i) {
return i / 29 * 20 - 4
}))
.enter()
.append("rect")
.attr("x", (d,i)=>i%10*20+100)
.attr("y", (d,i)=>Math.floor(i/10)*20+10)
.attr("width",16)
.attr("height",16)
.attr("fill",d=>colorscale(d));
但是此代码不起作用
请任何人帮忙。