Javascript 需要在SquareSpace上引用DOM元素的帮助吗
我试图破解一个SquareSpace站点，从GET变量更改下拉菜单的选定值 我正在努力引用viaJavascript 需要在SquareSpace上引用DOM元素的帮助吗,javascript,squarespace,Javascript,Squarespace,我试图破解一个SquareSpace站点，从GET变量更改下拉菜单的选定值 我正在努力引用viadocument.getElementsByClassName或document.getElementsByID的DOM元素，以便使用JS更改值 SquareSpace对元素有奇怪的引用，HTML不能更改，尤其是在这种上下文中。我是一个JavaScript新手，需要专家的帮助 问题：如何在JavaScript中引用下拉菜单的DOM元素？可能使用document.getElementBy… <di
document.getElementsByClassNamedocument.getElementsByIDdocument.getElementBy…<div class="product-variants" data-item-id="5f6d19150f4fd9415d8a1586" data-variants="[{"attributes":{"Size":"Small | 100 Photos"},"optionValues":[{"optionName":"Size","value":"Small | 100 Photos"}],"id":"68115c8d-399e-475b-8ea9-9543ad86cb02","sku":"SQ5845728","price":11900,"salePrice":0,"priceMoney":{"currency":"USD","value":"119.00"},"salePriceMoney":{"currency":"USD","value":"0.00"},"onSale":false,"unlimited":true,"qtyInStock":0,"width":0.0,"height":0.0,"weight":0.0,"imageIds":[],"images":[],"len":0.0},{"attributes":{"Size":"Medium | 250 Photos"},"optionValues":[{"optionName":"Size","value":"Medium | 250 Photos"}],"id":"dcfe8568-7199-4e68-91e2-d0f202fecdf7","sku":"SQ2105082","price":26900,"salePrice":0,"priceMoney":{"currency":"USD","value":"269.00"},"salePriceMoney":{"currency":"USD","value":"0.00"},"onSale":false,"unlimited":true,"qtyInStock":0,"width":0.0,"height":0.0,"weight":0.0,"imageIds":[],"images":[],"len":0.0},{"attributes":{"Size":"Large | 500 Photos"},"optionValues":[{"optionName":"Size","value":"Large | 500 Photos"}],"id":"494878cf-2af2-422c-91ec-e6d1850423aa","sku":"SQ9044986","price":49900,"salePrice":0,"priceMoney":{"currency":"USD","value":"499.00"},"salePriceMoney":{"currency":"USD","value":"0.00"},"onSale":false,"unlimited":true,"qtyInStock":0,"width":0.0,"height":0.0,"weight":0.0,"imageIds":[],"images":[],"len":0.0}]" data-animation-role="content">
<div class="variant-option">
<div class="variant-option-title">Size: </div>
<div class="variant-select-wrapper">
<select aria-label="Select Size" data-variant-option-name="Size">
<option value="">Select Size</option>
<option value="Small | 100 Photos">Small | 100 Photos</option>
<option value="Medium | 250 Photos">Medium | 250 Photos</option>
<option value="Large | 500 Photos">Large | 500 Photos</option>
</select>
</div>
<div class="variant-radiobtn-wrapper" data-variant-option-name="Size">
<input type="radio" class="variant-radiobtn" value="Small | 100 Photos" name="variant-option-Size" id="variant-option-Size-Small | 100 Photos"/>
<label for="variant-option-Size-Small | 100 Photos">Small | 100 Photos</label>
<input type="radio" class="variant-radiobtn" value="Medium | 250 Photos" name="variant-option-Size" id="variant-option-Size-Medium | 250 Photos"/>
<label for="variant-option-Size-Medium | 250 Photos">Medium | 250 Photos</label>
<input type="radio" class="variant-radiobtn" value="Large | 500 Photos" name="variant-option-Size" id="variant-option-Size-Large | 500 Photos"/>
<label for="variant-option-Size-Large | 500 Photos">Large | 500 Photos</label>
</div>
</div>
</div>
尺寸：
选择大小
小型| 100张照片
中等| 250张照片
大型| 500张照片
小型| 100张照片
中等| 250张照片
大型| 500张照片
注意-我可以使用
页面部分[data section id=“5f7bc0326befc806d06d1e5b”数据项iddocument.getElementsByTagName('select')[0].getElementsByTagName('option')[2].selected='selected';
document.getElementsByTagName('select')[0].value = 'Small | 100 Photos';
document.querySelector('div[data-item-id="5f6d19150f4fd9415d8a1586"]')
document.querySelector('div[data-item-id="5f6d19150f4fd9415d8a1586"]').getElementsByTagName('select')[0].value = 'Small | 100 Photos';
对于那些感兴趣的人，这里是我最后一段代码，用@ÿmit的输入来解决上面的问题。这被放入SquareSpace commerce页面页脚的代码块中
<script type = "text/javascript">
//https://www.denisbouquet.com/squarespace-code-injection-page-transition-run-script-page-reload/ - thanks to Denis Bouquet for this wrapper
$(function() {
function changeSizeMenu() {
//put all get parameters into an object called $_GET
//https://stackoverflow.com/a/12049737/2880312 - thanks to @gion_13 and @vrijdenker
var $_GET = {};
if (document.location.toString().indexOf('?') !== -1) {
var query = document.location
.toString()
// get the query string
.replace(/^.*?\?/, '')
// and remove any existing hash string (thanks, @vrijdenker)
.replace(/#.*$/, '')
.split('&');
for (var i = 0, l = query.length; i < l; i++) {
var aux = decodeURIComponent(query[i]).split('=');
$_GET[aux[0]] = aux[1];
}
}
//if the $_GET['select'] parameter is empty, return false
if(!$_GET['Size'] || $_GET['Size'] == '') {
// return FALSE;
console.log("Get parameter 'Size' = " + $_GET['Size']); ////for debugging
}
//get array with all selects within data-item-id 5f6d19150f4fd9415d8a1586 - thanks @ÿmit
var selectItems = document.querySelector('div[data-item-id="5f6d19150f4fd9415d8a1586"]').getElementsByTagName('select');
//if the selectItems array is empty, return false
if(!selectItems || selectItems.length == 0) {
//return FALSE;
console.log("selectItems is empty"); ////for debugging
}
//loop through all selects within data-item-id 5f6d19150f4fd9415d8a1586
for (si = 0; si < selectItems.length; si++) {
if(selectItems[si].getAttribute("data-variant-option-name") == 'Size') {
//if the data-variant-option-name is "Size" - that's the array key we want.
break;
}
}
//get label element for later
var label = document.querySelector('div[data-item-id="5f6d19150f4fd9415d8a1586"]').getElementsByClassName("variant-select-wrapper")[si];
// get all the option items from the "Size" select menu; key identified as `si` above
var optionItems = selectItems[si].getElementsByTagName('option')
//if the optionItems array is empty, return false
if(!optionItems || optionItems.length == 0) {
// return FALSE;
console.log("optionItems is empty"); ////for debugging
}
for (oi = 0; oi < optionItems.length; oi++) {
if(optionItems[oi].value == $_GET['Size']) {
console.log("MATCH" + optionItems[oi].value); //for debugging
//change the label on the drop-down menu
label.setAttribute("data-text", $_GET['Size']);
optionItems[oi].selected = 'selected';
} else {
optionItems[oi].selected = '';
}
console.log(oi + ":" + optionItems[oi].value); //for debugging
}
}
// run the function on first load of the website
changeSizeMenu();
// track every time we change of page
$("body").on('click', ".Header-nav-item", function() {
setTimeout(function() {
changeSizeMenu();
}, 500); // add a delay before to run the code again
});
})
</script>
//https://www.denisbouquet.com/squarespace-code-injection-page-transition-run-script-page-reload/ -感谢丹尼斯·布奎特为我们做的包装
$（函数（）{
函数changeSizeMenu（）{
//将所有get参数放入名为$\u get的对象中
//https://stackoverflow.com/a/12049737/2880312 -感谢@gion_13和@vrijdenker
var$_GET={}；
if（document.location.toString（）.indexOf（“？”）！=-1）{
var query=document.location
.toString（）
//获取查询字符串
.替换（/^.*？\？/，“”）
//并删除任何现有的哈希字符串（谢谢@vrijdenker）
.替换（/#。*$/，''）
.split（“&”）；
for（var i=0，l=query.length；i