[英]In Javascript, how do I write one function that will effect multiple buttons, each with their own separate arrays?
我目前正在使用三個單獨的按鈕設置一個應用程序,每個按鈕都應該隨機 select 一個特定於該按鈕的數組中的元素。 我已經成功地為每個按鈕編寫了單獨的功能,但我想知道是否有辦法將它壓縮成一個可以應用於所有三個按鈕的 function。
這是我目前的 Javascript:
const greyButton = document.querySelector('#grey');
greyButton.addEventListener('click', () => {
let grey = ['Statblocks/Grey/badger.png', 'Statblocks/Grey/giantrat.png', 'Statblocks/Grey/badger.png', 'Statblocks/Grey/boar.png', 'Statblocks/Grey/panther.png', 'Statblocks/Grey/gitant badger.png', 'Statblocks/Grey/dire wolf.png', 'Statblocks/Grey/giant elk.png']
for (i=0;i<grey.length;i++){
let greyBalls = grey[Math.floor(Math.random() * grey.length)];
document.getElementById('greyBall').src = greyBalls;
}
});
const rustButton = document.querySelector('#rust');
rustButton.addEventListener('click', () => {
let rust = ['Statblocks/Rust/rat.png', 'Statblocks/Rust/owl.png', 'Statblocks/Rust/mastiff.png', 'Statblocks/Rust/goat.png', 'Statblocks/Rust/giant goat.png', 'Statblocks/Rust/giant boar.png', 'Statblocks/Rust/lion.png', 'Statblocks/Rust/brown bear.png']
for (i=0;i<rust.length;i++){
let rustBalls = rust[Math.floor(Math.random() * rust.length)];
document.getElementById('rustBall').src = rustBalls;
}
});
const tanButton = document.querySelector('#tan');
tanButton.addEventListener('click', () => {
let tan = ['Statblocks/Tan/jackal.png', 'Statblocks/Tan/ape.png', 'Statblocks/Tan/baboon.png', 'Statblocks/Tan/axe beak.png', 'Statblocks/Tan/black bear.png', 'Statblocks/Tan/giant weasel.png', 'Statblocks/Tan/giant hyena.png', 'Statblocks/Tan/tiger.png']
for (i=0;i<tan.length;i++){
let tanBalls = tan[Math.floor(Math.random() * tan.length)];
document.getElementById('tanBall').src = tanBalls;
}
});
和連接的HTML:
<div class="row">
<div class="column">
<h1>Grey Bag of Tricks</h1>
<button class="button" id='grey'>Draw from the Bag</button>
<img src="" alt="" id="greyBall">
</div>
<div class="column">
<h1>Rust Bag of Tricks</h1>
<button class="button" id='rust'>Draw from the Bag</button>
<img src="" alt="" id="rustBall">
</div>
<div class="column">
<h1>Tan Bag of Tricks</h1>
<button class="button" id='tan'>Draw from the Bag</button>
<img src="" alt="" id="tanBall">
</div>
</div>
var urlsByColor = { grey: ['Statblocks/Grey/badger.png', 'Statblocks/Grey/giantrat.png', 'Statblocks/Grey/badger.png', 'Statblocks/Grey/boar.png', 'Statblocks/Grey/panther.png', 'Statblocks/Grey/gitant badger.png', 'Statblocks/Grey/dire wolf.png', 'Statblocks/Grey/giant elk.png'], rust: ['Statblocks/Rust/rat.png', 'Statblocks/Rust/owl.png', 'Statblocks/Rust/mastiff.png', 'Statblocks/Rust/goat.png', 'Statblocks/Rust/giant goat.png', 'Statblocks/Rust/giant boar.png', 'Statblocks/Rust/lion.png', 'Statblocks/Rust/brown bear.png'], tan: ['Statblocks/Tan/jackal.png', 'Statblocks/Tan/ape.png', 'Statblocks/Tan/baboon.png', 'Statblocks/Tan/axe beak.png', 'Statblocks/Tan/black bear.png', 'Statblocks/Tan/giant weasel.png', 'Statblocks/Tan/giant hyena.png', 'Statblocks/Tan/tiger.png'] }; function changeBall (e) { const urls = urlsByColor[e.target.id]; const randomIndex = Math.floor(Math.random() * urls.length); const randomUrl = urls[randomIndex]; const associatedBall = e.target.closest('.column').querySelector('.ball'); console.log(`change ${e.target.id} to ${randomUrl}`); associatedBall.src = randomUrl; console.log(associatedBall); } [...document.querySelectorAll('.color.button')].forEach(button => button.addEventListener('click', changeBall) );
<div class="row"> <div class="column"> <h1>Grey Bag of Tricks</h1> <button class="button color" id='grey'>Draw from the Bag</button> <img src="" alt="" class="ball" id="greyBall"> </div> <div class="column"> <h1>Rust Bag of Tricks</h1> <button class="button color" id='rust'>Draw from the Bag</button> <img src="" alt="" class="ball" id="rustBall"> </div> <div class="column"> <h1>Tan Bag of Tricks</h1> <button class="button color" id='tan'>Draw from the Bag</button> <img src="" alt="" class="ball" id="tanBall"> </div> </div>
好的,所以有些事情發生了變化。
通常,您將相似的重復部分放在 function 中,然后通過將其替換為 function 的參數來抽象出每種用法中不同的所有部分:
function addHandler(buttonSelector, ballImages, ballId) {
const button = document.querySelector(buttonSelector);
button.addEventListener('click', e => {
for (let i=0; i<ballImages.length; i++) {
let ball = ballImages[Math.floor(Math.random() * ballImages.length)];
document.getElementById(ballId).src = ball;
}
});
}
這樣你就可以這樣稱呼它
addHandler('#grey', ['Statblocks/Grey/badger.png', 'Statblocks/Grey/giantrat.png', 'Statblocks/Grey/badger.png', 'Statblocks/Grey/boar.png', 'Statblocks/Grey/panther.png', 'Statblocks/Grey/gitant badger.png', 'Statblocks/Grey/dire wolf.png', 'Statblocks/Grey/giant elk.png'], 'greyBall');
addHandler('#rust', ['Statblocks/Rust/rat.png', 'Statblocks/Rust/owl.png', 'Statblocks/Rust/mastiff.png', 'Statblocks/Rust/goat.png', 'Statblocks/Rust/giant goat.png', 'Statblocks/Rust/giant boar.png', 'Statblocks/Rust/lion.png', 'Statblocks/Rust/brown bear.png'], 'rustBall');
addHandler('#tan', ['Statblocks/Tan/jackal.png', 'Statblocks/Tan/ape.png', 'Statblocks/Tan/baboon.png', 'Statblocks/Tan/axe beak.png', 'Statblocks/Tan/black bear.png', 'Statblocks/Tan/giant weasel.png', 'Statblocks/Tan/giant hyena.png', 'Statblocks/Tan/tiger.png'], 'tanBall');
不過,這仍然是一些重復。 我們可以通過對數據進行額外處理來避免這種情況,以便我們可以傳遞更簡單的值:
function addHandler(id, imageNames) {
const buttonSelector = '#' + id;
const ballImages = imageNames.map(name => `Statblocks/${id[0].toUpperCase()+id.slice(1)}/${name}.png}`);
const ballId = id + 'Ball';
… // rest as before
}
addHandler('grey', ['badger', 'giantrat', 'badger', 'boar', 'panther', 'gitant badger', 'dire wolf', 'giant elk']);
addHandler('rust', ['rat', 'owl', 'mastiff', 'goat', 'giant goat', 'giant boar', 'lion', 'brown bear']);
addHandler('tan', ['jackal', 'ape', 'baboon', 'axe beak', 'black bear', 'giant weasel', 'giant hyena', 'tiger']);
最后,我將querySelector
更改為getElementById
查找,並刪除不必要的循環,我們到達
function addHandler(id, imageNames) {
const ballImages = imageNames.map(name => `Statblocks/${id[0].toUpperCase()+id.slice(1)}/${name}.png}`);
const button = document.getElementById(id);
button.addEventListener('click', e => {
let ball = ballImages[Math.floor(Math.random() * ballImages.length)];
document.getElementById(id + 'Ball').src = ball;
});
}
addHandler('grey', ['badger', 'giantrat', 'badger', 'boar', 'panther', 'gitant badger', 'dire wolf', 'giant elk']);
addHandler('rust', ['rat', 'owl', 'mastiff', 'goat', 'giant goat', 'giant boar', 'lion', 'brown bear']);
addHandler('tan', ['jackal', 'ape', 'baboon', 'axe beak', 'black bear', 'giant weasel', 'giant hyena', 'tiger']);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.