当我点击骰子时，我需要改变骰子的 this.value，但现在我只是想让它显示一个警报，但我什至不能这样做。我已经深入研究了 e.target 以及几乎所有我能找到的东西，但我只是不知道我错过了什么我觉得这是一个愚蠢的问题，但我现在花了一个多小时试图弄清楚这一点出来，我无法得到它。
function randomNumber(min, max) {
return Math.floor(Math.random() * (max - min) + min);
}
const diceArray = [];
const body = document.body;
class Die {
constructor() {
this.value = this.roll();
this.div = $(`<div class="a-die d-flex align-items-center justify-content-center"><h1 class="die-text">${this.value}</h1></div>`);
diceArray.push(this);
$('#diceHolder').append(this.div);
this.div.addEventListener("click", function() {
alert('hello');
})
}
roll = () => {
return randomNumber(1, 7);
}
refreshView = () => {
$(this.div).find('h1').text(this.value);
}
rollAll = () => {
$(this.value).replaceWith(randomNumber(1, 7));
}
}
$('#genDice').on('click', () => {
let thisDie = new Die()
});
$('#yahtzee').on('click', () => $('.die-text').text(randomNumber(1, 7)));
$('#sumDice').on('click', () => {
const thing = diceArray.reduce((acc, val) => {
return acc + val.value;
}, 0)
alert(thing);
})
$('#rollDice').on('click', () => diceArray.forEach(val => {
// console.log(val);
val.value = randomNumber(1, 7);
val.refreshView();
}));
$('#remove').on('click', () => {
$('.a-die').remove()
$(diceArray).empty();
});
console.log(diceArray);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="d-flex justify-content-around mb-5 mt-2 py-3 bg-light" style="border: 1px solid black;">
<div id="genDice" class="btn btn-primary">Generate Die</div>
<div id="rollDice" class="btn btn-secondary">Roll All Die</div>
<div id="sumDice" class="btn btn-success">Sum All Dice</div>
<div id="yahtzee" class="btn btn-danger">Yahtzee</div>
<div id="remove" class="btn btn-dark">Bye-Bye</div>
</div>
<div id="diceHolder" class="d-flex justify-content-evenly"></div>这里有多个问题：
this.div是一个 jQuery 对象，您不能使用.addEventListener()它来注册单击事件。只.click()在 jQuery 对象上使用 jQuery 的方法要好得多。
refreshView()试图制作一个 jQuery 对象的 jQuery 对象。虽然显然这可以工作，但它是多余的，不应该那样做。
您使用箭头函数的方法定义使用了一种新的语法（字段声明），它没有在原型上定义成熟的方法 - 它的工作方式不同。虽然它可以在这种特定情况下工作，但我不推荐它，因为它不像常规方法那样可扩展（并且不在原型上），因此在子类化方面有限制。因此，方法通常应该定义为普通函数，而不是分配为箭头函数。在某些特殊用例中，您希望所有方法都成为“绑定”方法，您可能希望像以前使用的那样使用字段定义，但我只建议在您明确知道这样做的原因时使用该语法，并且您出于特定原因利用它。
rollAll()可能不会如图所示工作，因为$(this.value)将执行$(someNumber)不太可能匹配任何内容的操作。您需要传递一个 Dom 元素、一个 jQuery 对象或一个 CSS 选择器 t0 $(x)。
所以，这是包含这些更改的代码：
class Die {
constructor() {
this.value = this.roll();
this.div = $(`<div class="a-die d-flex align-items-center justify-content-center"><h1 class="die-text">${this.value}</h1></div>`);
diceArray.push(this);
$('#diceHolder').append(this.div);
this.div.click(() => {
alert('hello');
});
}
roll() {
return randomNumber(1, 7);
}
refreshView() {
this.div.find('h1').text(this.value);
}
rollAll() {
$(this.value).replaceWith(randomNumber(1, 7));
}
}
然后，您可以像这样使用它：
let die = new Die();
die.refreshView();
并且，您需要确保在页面 DOM 加载到页面之前不会运行此代码，以便您的 jQuery 引用能够针对已加载的 DOM 正常工作。
该rollAll()方法还有第三个问题。您正在尝试执行$(this.value)，但它this.value是一个随机数，它不太可能$()在您的 DOM 中实际找到元素时正常工作。您需要传递一个选择器或一个 HTML 元素$()才能使用它。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句