我正在嘗試將每個復選框的值添加到URLsearchParams,第一次檢查復選框時它作業正常,但是當我重新加載頁面時,它不再作業,我做錯了什么?我的意思是它state在頁面加載后有效,但無法正常作業,我該如何解決?
function setURL(query){
//var url = window.location.protocol "//" window.location.host window.location.pathname;
var url = window.location.href;
let newURL = new URL(url);
newURL.searchParams.append('brands', query)
window.history.replaceState(null, null, newURL);
}
function checkURL(){
var url = window.location.href;
let newURL = new URL(url);
window.history.replaceState(null, null, newURL);
if(newURL.searchParams.has('brands')){
let currentBrands = newURL.searchParams.get('brands');
let brandsArray = currentBrands.split(',');
brandsArray.map(function(v,i){
jQuery('input[name="pa_brand"][value="' v '"]').click();
});
}
}
checkURL();
let array = [];
jQuery('input[name="pa_brand"]').change(function(){
let value = this.value;
let id = array.indexOf(value);
if(jQuery(this).is(':checked')){
array.push(value)
} else {
array.splice(id, 1);
}
setURL(array.toString())
console.log(array)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="pa_brand" value="116"/>
<input type="checkbox" name="pa_brand" value="117"/>
<input type="checkbox" name="pa_brand" value="118"/>
uj5u.com熱心網友回復:
首先替換newURL.searchParams.append('brands', query)為newURL.searchParams.set('brands', query). 它也將在checkURL將初始值設定為array變數時解決您的問題。在這兩次更改后,我編輯了您的代碼,一切看起來都不錯。
let array = [];
function setURL(query){
//var url = window.location.protocol "//" window.location.host window.location.pathname;
var url = window.location.href;
let newURL = new URL(url);
newURL.searchParams.set('brands', query)
window.history.replaceState(null, null, newURL);
}
function checkURL(){
var url = window.location.href;
let newURL = new URL(url);
window.history.replaceState(null, null, newURL);
if(newURL.searchParams.has('brands')){
let currentBrands = newURL.searchParams.get('brands');
let brandsArray = currentBrands.split(',');
array = brandsArray;
brandsArray.map(function(v,i){
jQuery('input[name="pa_brand"][value="' v '"]').click();
});
}
}
checkURL();
jQuery('input[name="pa_brand"]').change(function(){
let value = this.value;
let id = array.indexOf(value);
if(jQuery(this).is(':checked')){
array.push(value)
} else {
array.splice(id, 1);
}
setURL(array.toString())
console.log(array)
})
轉載請註明出處,本文鏈接:https://www.uj5u.com/caozuo/382389.html
標籤:javascript 查询 网址
上一篇:如何在url中使用問號?
