我對(duì) PHP 開(kāi)發(fā)還很陌生，使用 MySQL 并添加了 JS。我想聽(tīng)聽(tīng)專(zhuān)家對(duì)以下問(wèn)題的意見(jiàn)，或者任何好的建議都可以。因此，我正在制作一個(gè)網(wǎng)站，對(duì)你們大多數(shù)人來(lái)說(shuō)可能很簡(jiǎn)單，但對(duì)我來(lái)說(shuō)有點(diǎn)復(fù)雜，它允許登錄用戶(hù)創(chuàng)建活動(dòng)并參加活動(dòng)。最近我添加了一個(gè)新功能 - 前端按類(lèi)別過(guò)濾事件，因?yàn)槲乙蚕朐?JS 上進(jìn)行一些練習(xí)。還沒(méi)有嘗試過(guò)后端過(guò)濾。問(wèn)題是它工作正常，但我認(rèn)為 JS 代碼本身看起來(lái)非常糟糕和混亂。因此我想了一個(gè)辦法來(lái)優(yōu)化它，但沒(méi)有找到。類(lèi)別選擇.html代碼<select class="custom-select mr-sm-2" id="filterCat"onchange="filterCategory()"> <option selected>All</option> <option value="1">Concerts</option> <option value="2">Sport</option> <option value="3">Comedy</option> <option value="4">Theatre</option> <option value="5">Family attractions</option></select>php查詢(xún)以確定循環(huán)的大小<?php// ...require_once('../features/con.php');if (!$con->connect_errno) { $countQ = "SELECT COUNT(*) AS number FROM events;"; $resultCounting = $con->query($countQ); $size = mysqli_fetch_assoc($resultCounting);}// ...?>過(guò)濾結(jié)果算法<script type="text/javascript"> var catinput, cat, evinput, events, table, i, t, txtValue, number, num, tableRes, none, no, tableID, tr, td; number = <?php echo $size['number'] ?>; function filterCategory() { catinput = document.getElementById('filterCat'); cat = catinput.options[catinput.selectedIndex].text; t = "table"; for (var j = 1; j <= number; j++) { num = j; tableRes = t.concat(num); none = document.getElementById(tableRes).style.display; if (none == "none") { document.getElementById(tableRes).style.display = ""; } } }}</script>每個(gè)具有不同事件的單獨(dú)表都有唯一的ID，該ID是根據(jù)數(shù)據(jù)庫(kù)中的event_id表列確定的（這是從1開(kāi)始自動(dòng)遞增的列，自動(dòng)設(shè)置）。我創(chuàng)建了一個(gè)關(guān)聯(lián)數(shù)組來(lái)列出數(shù)據(jù)庫(kù)中的所有事件，然后只需添加以下一個(gè)： id="table<?php echo "$row[event_id]"?>"但是這個(gè) JS 代碼本身 - 可以以某種方式優(yōu)化嗎？也許你有什么想法？任何提示真的很感激！
3 回答
郎朗坤
TA貢獻(xiàn)1921條經(jīng)驗(yàn) 獲得超9個(gè)贊
好吧，我建議他們做很多改變。不僅是為了性能，也是為了可讀性。
首先，我為每個(gè)表提供了一個(gè)數(shù)據(jù)屬性，稍后我們將使用該屬性進(jìn)行過(guò)濾。我還更改了選擇框的值以匹配數(shù)據(jù)集的值。
在 JS 中，我僅選擇項(xiàng)目。您在循環(huán)的每次迭代中使用?getElementBy?，這意味著 JS 需要多次查看 DOM，我沒(méi)有使用多個(gè)循環(huán)，而是將其全部編寫(xiě)在一個(gè)循環(huán)中。因?yàn)樗梢砸淮涡酝瓿伞?/p>
最后我使用了 ES6 語(yǔ)法，因?yàn)樗试S我使用?const?或?let< /span>解構(gòu)?和?for of 循環(huán)、箭頭函數(shù)、
// Get the selectbox
const selectBox = document.querySelector("#filterCat");
// Get all the tables
const events = document.querySelectorAll(".event");
// Add eventlistener to trigger whenever the value changes
selectBox.addEventListener("change", () => {
? // Get selected value
? const { value } = selectBox;
??
? // Loop over each event (table)
? for(const event of events) {
? ? // Show the table
? ? event.style.display = "table";
? ??
? ? // Continue to the next one if we want to show all tables
? ? if(value === "All") continue;
? ??
? ? // Get type from dataset
? ? const { type } = event.dataset;
? ? // If it is not the selected category hide it
? ? if(value !== type) {
? ? ? event.style.display = "none"
? ? };
? }
});
<select class="custom-select mr-sm-2" id="filterCat">
?<option selected>All</option>
?<option value="concert">Concerts</option>
?<option value="sport">Sport</option>
?<option value="comedy">Comedy</option>
?<option value="theatre">Theatre</option>
?<option value="family-attractions">Family attractions</option>
</select>
<table class="event" data-type="concert">
? <tr><td>Concert 1</td></tr>
</table>
<table class="event" data-type="sport">
? <tr><td>Sport 1</td></tr>
</table>
<table class="event" data-type="comedy">
? <tr><td>Comedy 1</td></tr>
</table>
<table class="event" data-type="theatre">
? <tr><td>Theatre 1</td></tr>
</table>
<table class="event" data-type="family-attractions">
? <tr><td>Family attractions 1</td></tr>
</table>
<table class="event" data-type="concert">
? <tr><td>Concert 2</td></tr>
</table>
<table class="event" data-type="sport">
? <tr><td>Sport 2</td></tr>
</table>
<table class="event" data-type="comedy">
? <tr><td>Comedy 2</td></tr>
</table>
<table class="event" data-type="theatre">
? <tr><td>Theatre 2</td></tr>
</table>
<table class="event" data-type="family-attractions">
? <tr><td>Family attractions 2</td></tr>
</table>
無(wú)評(píng)論版本：
const selectBox = document.querySelector("#filterCat");
const events = document.querySelectorAll(".event");
selectBox.addEventListener("change", () => {
? const { value } = selectBox;
??
? for(const event of events) {
? ? event.style.display = "table";
? ??
? ? if(value === "All") continue;
? ??
? ? const { type } = event.dataset;
? ? if(value !== type) {
? ? ? event.style.display = "none"
? ? };
? }
});
<select class="custom-select mr-sm-2" id="filterCat">
?<option selected>All</option>
?<option value="concert">Concerts</option>
?<option value="sport">Sport</option>
?<option value="comedy">Comedy</option>
?<option value="theatre">Theatre</option>
?<option value="family-attractions">Family attractions</option>
</select>
<table class="event" data-type="concert">
? <tr><td>Concert 1</td></tr>
</table>
<table class="event" data-type="sport">
? <tr><td>Sport 1</td></tr>
</table>
<table class="event" data-type="comedy">
? <tr><td>Comedy 1</td></tr>
</table>
<table class="event" data-type="theatre">
? <tr><td>Theatre 1</td></tr>
</table>
<table class="event" data-type="family-attractions">
? <tr><td>Family attractions 1</td></tr>
</table>
<table class="event" data-type="concert">
? <tr><td>Concert 2</td></tr>
</table>
<table class="event" data-type="sport">
? <tr><td>Sport 2</td></tr>
</table>
<table class="event" data-type="comedy">
? <tr><td>Comedy 2</td></tr>
</table>
<table class="event" data-type="theatre">
? <tr><td>Theatre 2</td></tr>
</table>
<table class="event" data-type="family-attractions">
? <tr><td>Family attractions 2</td></tr>
</table>
婷婷同學(xué)_
TA貢獻(xiàn)1844條經(jīng)驗(yàn) 獲得超8個(gè)贊
這是一個(gè)更簡(jiǎn)單的實(shí)現(xiàn)。我使用 DIV 代替表格，以保持代碼簡(jiǎn)潔。
function filter_tables() {
var selected = document.getElementById('table-selector').value;
var tables = document.querySelectorAll('.table');
if(selected === 'all') {
tables.forEach( t => { t.className = 'table'; });
} else {
tables.forEach( t => {
if(t.id === 'table'.concat(selected)) {
t.className = 'table';
} else {
t.className = 'table hidden';
}
});
}
}
div.table {
padding: 8px;
margin: 12px;
background-color: yellow;
}
div.table.hidden {
display: none;
}
<select id="table-selector" onchange="filter_tables();">
<option value="all" selected>All</option>
<option value="1">Table 1</option>
<option value="2">Table 2</option>
<option value="3">Table 3</option>
</select>
<div class="table" id="table1">Table 1</div>
<div class="table" id="table2">Table 2</div>
<div class="table" id="table3">Table 3</div>
守候你守候我
TA貢獻(xiàn)1802條經(jīng)驗(yàn) 獲得超10個(gè)贊
var catinput, cat, evinput, events, table, i, t, txtValue, number, num, tableRes, none, no, tableID, tr, td;
number = <?php echo $size['number'] ?>;
您在腳本開(kāi)頭聲明每個(gè)變量，但有些變量?jī)H在函數(shù)或循環(huán)中本地使用。 僅在函數(shù)中使用的變量應(yīng)在循環(huán)中聲明。 在你的腳本中， num, tableRes, ... 必須在循環(huán)開(kāi)始處聲明 for (var j = 1; j <= number; j++) {}
另外，您還可以聲明一個(gè)空變量來(lái)立即填充它們。直接給出它們的值。
你的腳本將像這樣結(jié)束：
<script type="text/javascript">
function filterCategory() {
var evinput, events, i, txtValue, number;
number = <?php echo $size['number'] ?>,
catinput = document.getElementById('filterCat'),
cat = catinput.options[catinput.selectedIndex].text;
t = "table";
for (var j = 1; j <= number; j++) {
var num = j,
tableRes = t.concat(num),
none = document.getElementById(tableRes).style.display;
if (none == "none") {
document.getElementById(tableRes).style.display = "";
}
}
for (var i = 1; i <= number; i++) {
if (cat != "All") {
var no = i,
tableID = t.concat(no),
table = document.getElementById(tableID),
tr = table.getElementsByTagName("tr"),
td = tr[1].getElementsByTagName("td")[0],
txtValue = td.innerText;
if (cat.toUpperCase() != txtValue.toUpperCase()) {
document.getElementById(tableID).style.display = "none";
} else {
document.getElementById(tableID).style.display = "";
}
}
}
}
</script>
- 3 回答
- 0 關(guān)注
- 193 瀏覽
添加回答
舉報(bào)
0/150
提交
取消