我有一个.canvas类的部分,我想在其上面显示图像(它是薯条的图片,并且我希望浇头出现在它们上)。我设法使图像出现在画布类的部分上,但它们都彼此堆叠。如何同时添加图像并使用相同的按钮删除前一个图像,最好使用jQuery。
$('#randomize').on('click', function() {
const imgArray = $('.imgContainer');
const randomImg = Math.floor(Math.random() * imgArray.length) + 1;
for (let i = 0; i < imgArray.length; i++) {
if (randomImg === 1) {
imgArray[0].style.display = 'block';
} else if (randomImg === 2) {
imgArray[1].style.display = 'block';
} else if (randomImg === 3) {
imgArray[2].style.display = 'block';
} else if (randomImg === 4) {
imgArray[3].style.display = 'block';
} else if (randomImg === 5) {
imgArray[4].style.display = 'block';
} else if (randomImg === 6) {
imgArray[5].style.display = 'block';
} else if (randomImg === 7) {
imgArray[6].style.display = 'block';
} else if (randomImg === 8) {
imgArray[7].style.display = 'block';
} else if (randomImg === 9) {
imgArray[8].style.display = 'block';
} else {
imgArray[9].style.display = 'block';
}
.imgContainer {
display: none;
}
<button id="randomize">Feed me</button>
<section class="canvas">
<div class="imgContainer ketchup">
<img src="./assets/images/ketchup.png" alt="">
</div>
<div class="imgContainer cheese">
<img src="./assets/images/cheeseCurds.png" alt="">
</div>
<div class="imgContainer peppers">
<img src="./assets/images/hotPeppers.png" alt="">
</div>
<div class="imgContainer bacon">
<img src="./assets/images/baconBits.png" alt="">
</div>
<div class="imgContainer iceCream">
<img src="./assets/images/iceCream.png" alt="">
</div>
<div class="imgContainer sprinkles">
<img src="./assets/images/sprinkles.png" alt="">
</div>
<div class="imgContainer vaccine">
<img src="./assets/images/vaccine.png" alt="">
</div>
<div class="imgContainer kitten">
<img src="./assets/images/kitten.png" alt="">
</div>
<div class="imgContainer sock">
<img src="./assets/images/dirtySock.png" alt="">
</div>
<div class="imgContainer face">
<img src="./assets/images/brendanFraser.png" alt="">
</div>
</section>
此代码段在此处无法正常运行,因为它不包含整个文件。我只是失去了作为同时去除前一个我应该怎么添加图片。
答案 0 :(得分:0)
例如,您可以在显示任何内容之前将其全部隐藏。
$('.imgContainer').hide();
$('#randomize').on('click', function() {
const imgArray = $('.imgContainer');
const randomImg = Math.floor(Math.random() * imgArray.length) + 1;
$('.imgContainer').hide();
for (let i = 0; i < imgArray.length; i++) {
if (randomImg === 1) {
imgArray[0].style.display = 'block';
} else if (randomImg === 2) {
imgArray[1].style.display = 'block';
} else if (randomImg === 3) {
imgArray[2].style.display = 'block';
}
} });
.imgContainer {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="randomize">Feed me</button>
<section class="canvas">
<div class="imgContainer ketchup">
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.W8Ixmq-tCRyq4hwmsRrVqgHaDt%26pid%3DApi&f=1" alt="">
</div>
<div class="imgContainer cheese">
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fpmcvariety.files.wordpress.com%2F2019%2F12%2Fbaby-yoda-plush-toy-mattel-the-mandalorian.png%3Fw%3D1000%26h%3D563%26crop%3D1&f=1&nofb=1" alt="">
</div>
<div class="imgContainer peppers">
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.digitaltveurope.com%2Ffiles%2F2019%2F12%2FBaby-Yoda-Soup.jpg&f=1&nofb=1" alt="">
</div>
</section>
答案 1 :(得分:0)
我们真的并不需要所有这些代码,也不需要+1。否则,您将得到一个错误,因为它是未定义的:
const randomImg = Math.floor(Math.random() * imgArray.length);
imgArray[randomImg].style.display = 'block';
我们正在做的是找到一个介于0到6之间的随机数,因为数组中有7张图像。 click事件处理程序将始终更改,因此不需要循环或if语句。
const imgArray = $('.imgContainer');
$('#randomize').on('click', function() {
$('.imgContainer').hide();
const randomImg = Math.floor(Math.random() * imgArray.length);
$('.number-check').html(randomImg);
imgArray[randomImg].style.display = 'block';
});
.imgContainer {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="randomize">Feed me</button>
<div>Lets check the number: <span class="number-check"></span></div>
<section class="canvas">
<div class="imgContainer ketchup">
<img src="https://picsum.photos/id/122/200/300" alt="">
</div>
<div class="imgContainer cheese">
<img src="https://picsum.photos/id/144/200/300" alt="">
</div>
<div class="imgContainer peppers">
<img src="https://picsum.photos/id/198/200/300" alt="">
</div>
<div class="imgContainer peppers">
<img src="https://picsum.photos/200/300" alt="">
</div>
<div class="imgContainer peppers">
<img src="https://picsum.photos/id/137/200/300" alt="">
</div>
<div class="imgContainer peppers">
<img src="https://picsum.photos/id/111/200/300" alt="">
</div>
<div class="imgContainer peppers">
<img src="https://picsum.photos/id/237/200/300" alt="">
</div>
</section>