[英]JavaScript replace multiple if statements
我有幾個完全相同的html頁面,我想使用相同的JavaScript文件來讀取文本文件並更改html頁面上的數據。 由於每個頁面的文本文件都不相同,因此我使用了多個if語句來完成此操作。 如果有一種方法可以將其替換為某些循環會更好?
if (window.location.pathname=='/myapp/main.html') {
$.get('data/data1.txt', function(data) {
var bigarray = data.split('\n');
bigarray.forEach(function(currRow){
currentRow = currRow.split(';');
table.push(currentRow);});
}, 'text');
}
if (window.location.pathname=='/myapp/main2.html') {
$.get('data/data2.txt', function(data) {
var bigarray = data.split('\n');
bigarray.forEach(function(currRow){
currentRow = currRow.split(';');
table.push(currentRow);});
}, 'text');
}
if (window.location.pathname=='/myapp/main3.html') {
$.get('data/data3.txt', function(data) {
var bigarray = data.split('\n');
bigarray.forEach(function(currRow){
currentRow = currRow.split(';');
table.push(currentRow);});
}, 'text');
}
if (window.location.pathname=='/myapp/main4.html') {
$.get('data/data4.txt', function(data) {
var bigarray = data.split('\n');
bigarray.forEach(function(currRow){
currentRow = currRow.split(';');
table.push(currentRow);});
}, 'text');
}
先感謝您!
所以要么使用一個對象
var paths = {
"/myapp/main.html" : "data/data1.txt",
"/myapp/main2.html" : "data/data2.txt",
"/myapp/main3.html" : "data/data3.txt",
"/myapp/main4.html" : "data/data4.txt"
};
var filePath = paths[window.location.pathname];
if (filePath) {
$.get(filePath, ...)
}
或者使用reg exp來匹配數字,如果路徑相同則使用該數字。
由於您的路徑具有相同的結構,因此您只需使用正則表達式即可獲取數字。
這樣一來,您就可以隨時創建新的頁面/數據,它會自動將其拾取。
if (window.location.pathname.startsWith('/myapp/main') { // this "if" might not be needed
var pathnum = window.location.pathname.replace(/[^0-9]/g,'');
$.get('data/data' + pathnum + '.txt', function(data) {
var bigarray = data.split('\n');
bigarray.forEach(function(currRow){
currentRow = currRow.split(';');
table.push(currentRow);});
}, 'text');
}
而且,如果main.html
沒有數字應使用data1.txt
,則可以執行以下操作
$.get('data/data' + (pathnum == '' ? 1 : pathnum) + '.txt', function(data) {
創建了一個簡單的可重用函數,該函數接受路徑和數據URL:
const getData = (path, url) => { if (window.location.pathname === path ) { $.get(url, function(data) { var bigarray = data.split('\\n'); bigarray.forEach(function(currRow){ currentRow = currRow.split(';'); table.push(currentRow);}); }, 'text'); } } // Usage getData('/myapp/main.html', 'data/data1.txt'); getData('/myapp/main2.html', 'data/data2.txt'); getData('/myapp/main3.html', 'data/data3.txt'); getData('/myapp/main4.html', 'data/data4.txt');
您可以使用模板文字。
文件: https : //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
function changeText() {
const toString = Object.prototype.toString;
const { pathname } = window.location;
// Get the index of the dot
const dot = pathname.search('.');
// Grab the character immediately preceding the dot
const testChar = pathname.charAt(dot-1);
// If the character is not a number, set the index to 1
const index = toString.call(testChar) === '[object Number]'
? testChar
: 1;
// Use the template literal
$.get(`data/data${index}.txt`, function(data) {
var bigarray = data.split('\n');
bigarray.forEach(function(currRow){
currentRow = currRow.split(';');
table.push(currentRow);});
}, 'text');
}
該方法不需要循環或自定義文本。 用法很簡單: changeText()
。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.