我有多个按钮和多个JS函数，它们针对不同的按钮显示不同的计数器。如何将多个JS函数简化/压缩为一个将每个按钮连接到其计数器的函数？
这是两个按钮，两个计数器和两个JS函数的可行示例。您能否建议如何简化/压缩它？非常感谢。
两个JAVASCRIPT功能和样式
<!-- JS and Style in head -->
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script>
function clickCounter1() {
if (typeof(Storage) !== "undefined") {
if (localStorage.clickcount1) {
localStorage.clickcount1 = Number(localStorage.clickcount1)+1;
} else {
localStorage.clickcount1 = 1;
}
document.getElementById("result1").innerHTML = "You have clicked the button " + localStorage.clickcount1 + " time(s).";
} else {
document.getElementById("result1").innerHTML = "Sorry, your browser does not support web storage...";
}
}
</script>
<script>
function clickCounter2() {
if (typeof(Storage) !== "undefined") {
if (localStorage.clickcount2) {
localStorage.clickcount2 = Number(localStorage.clickcount2)+1;
} else {
localStorage.clickcount2 = 1;
}
document.getElementById("result2").innerHTML = "You have clicked the button " + localStorage.clickcount2 + " time(s).";
} else {
document.getElementById("result2").innerHTML = "Sorry, your browser does not support web storage...";
}
}
</script>
<style>
.button {
border: none;
color: white;
padding: 1px 3px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button1 {background-color: #4CAF50;} /* Green */
.button2 {background-color: #008CBA;} /* Blue */
</style>
</head>
<!-- End of Head -->
两个HTML按钮：
<p><button class="button button1" onclick="clickCounter1()" type="button" background-color="black" color="white">Click it - Button1 <i class="glyphicon glyphicon-thumbs-up" style="font-size:14px;color:white;"></i></button></p>
<div id="result1"></div>
<p><button class="button Button2" onclick="clickCounter2()" type="button" background-color="black" color="white">Click it - button2 <i class="glyphicon glyphicon-thumbs-up" style="font-size:14px;color:white;"></i></button></p>
<div id="result2"></div>
<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the counter will continue to count (is not reset).</p>
我将clickCounter功能简化为一个。
此处更改Storage对象的相关属性取决于buttons节点列表的索引。
<p>
<button class="button button1" type="button" background-color="black" color="white">Click
it - Button1 <i class="glyphicon glyphicon-thumbs-up" style="font-size:14px;color:white;"></i></button>
</p>
<div class="result"></div>
<p>
<button class="button Button2" type="button" background-color="black" color="white">Click
it - button2 <i class="glyphicon glyphicon-thumbs-up" style="font-size:14px;color:white;"></i></button>
</p>
<div class="result"></div>
const buttons = document.querySelectorAll('.button');
const results = document.querySelectorAll('.result');
function clickCounter(button, index) {
const property = "clickcount" + index + 1;
if (typeof (Storage) !== "undefined") {
if (localStorage[property]) {
console.log(localStorage)
localStorage[property] = Number(localStorage[property]) + 1;
} else {
localStorage[property] = 1;
}
results[index].innerHTML = "You have clicked the button " + localStorage[property] + " time(s).";
} else {
results[index].innerHTML = "Sorry, your browser does not support web storage...";
}
}
buttons.forEach((button, index) => {
button.addEventListener('click', function () {
clickCounter(button, index)
})
})
试图保持您的代码结构，所以我用了function parameter和localStorage方法getItem, setItem
// html
<p>
<button
class="button button1"
onclick="clickCounter(1)"
type="button"
background-color="black"
color="white"
>
Click it - Button1
<i
class="glyphicon glyphicon-thumbs-up"
style="font-size: 14px; color: white;"
>
</i>
</button>
</p>
<div id="result1"></div>
<p>
<button
class="button Button2"
onclick="clickCounter(2)"
type="button"
background-color="black"
color="white"
>
Click it - button2
<i
class="glyphicon glyphicon-thumbs-up"
style="font-size: 14px; color: white;"
>
</i>
</button>
</p>
<div id="result2"></div>
<p>Click the button to see the counter increase.</p>
<p>
Close the browser tab (or window), and try again, and the counter will
continue to count (is not reset).
</p>
// JS
function clickCounter(num) {
let counterIndex = `clickcount${num}`;
console.log(counterIndex, localStorage);
if (typeof Storage !== "undefined") {
if (localStorage.getItem(`clickcount${num}`)) {
localStorage.setItem(
`clickcount${num}`,
Number(localStorage.getItem(`clickcount${num}`)) + 1
);
} else {
localStorage.setItem(`clickcount${num}`, 1);
}
document.getElementById(`result${num}`).innerHTML =
"You have clicked the button " +
localStorage.getItem(`clickcount${num}`) +
" time(s).";
} else {
document.getElementById(`result${num}`).innerHTML =
"Sorry, your browser does not support web storage...";
}
}