首頁猿問需要幫助在 SquareSpace...

需要幫助在 SquareSpace 上引用 DOM 元素

JavaScript

白豬掌柜的 2023-06-15 17:45:20

我正在嘗試破解 SquareSpace 站點以從 GET 變量更改下拉菜單的選定值。我正在努力引用 via 的 DOM 元素document.getElementsByClassName，所以document.getElementsByID我可以使用 JS 更改值。SquareSpace 對元素的引用很奇怪，并且 HTML 無法更改，尤其是在這種情況下。我是一個 JavaScript 新手，可以從那里的專家那里得到一些幫助......問題：如何在 JavaScript 中引用下拉菜單的 DOM 元素？也許使用document.getElementBy...？ <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>注意- 我可以data-item-id使用選擇器在 CSS 中引用.page-section[data-section-id="5f7bc0326befc806d06d1e5b"]。

查看完整描述

2 回答

莫回無

TA貢獻1865條經驗獲得超7個贊

首先獲取“select”元素，然后獲取您需要的選項并將 selected 屬性設置為“selected”。但如果存在多個“選擇”標簽，請小心。由于您獲得了一組元素，因此您應該知道所需元素的索引。

document.getElementsByTagName('select')[0].getElementsByTagName('option')[2].selected='selected';

因為你想按值設置，你可以使用

document.getElementsByTagName('select')[0].value = 'Small | 100 Photos';

最好的選擇是通過這種方式獲取您提到的父元素

document.querySelector('div[data-item-id="5f6d19150f4fd9415d8a1586"]')

然后進一步到想要的元素。這樣您就可以確定自己選對了。但它要求data-item-id 是唯一的和靜態的。

結合起來它看起來像這樣：

document.querySelector('div[data-item-id="5f6d19150f4fd9415d8a1586"]').getElementsByTagName('select')[0].value = 'Small | 100 Photos';

反對回復 2023-06-15

函數式編程

TA貢獻1807條經驗獲得超9個贊

對于那些有興趣的人，這是我解決上述問題的最終代碼，@?mit 的輸入。這被放入 SquareSpace 商務頁面頁腳的代碼塊中。

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

反對回復 2023-06-15

2 回答
0 關注
157 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

需要幫助在 SquareSpace 上引用 DOM 元素

需要幫助在 SquareSpace 上引用 DOM 元素

2 回答

添加回答