gpt4 book ai didi

javascript - Div ID 在屏幕加载时更改,但新的 id 脚本在点击时未触发

转载 作者:行者123 更新时间:2023-12-01 08:33:16 25 4
gpt4 key购买 nike

我正在尝试获得一个随机获胜者弹出窗口。我已经到了这样的地步:当页面加载时,3 个 div id 之一被获胜者替换。

问题是当单击具有 id 获胜者的 div 时,它不会触发与其关联的 jquery。

我可以改变什么来解决这个问题吗?

下面包含我正在使用的代码示例。

    <script>
$(document).ready(function(){
$("#left").click(function(){
$("#limg").attr('src', 'https://via.placeholder.com/175');
});

$("#center").click(function(){
$("#cimg").attr('src', 'https://via.placeholder.com/175');
});

$("#right").click(function(){
$("#rimg").attr('src', 'https://via.placeholder.com/175');
});

$("#winner").click(function(){
$("#wimg").attr('src', 'https://via.placeholder.com/190');
$("#winbox").css('display','block');
$("#winbox").css('z-index','2');
});
});
</script>
<style>
#winbox {display:none; background-color:red; color:white; padding:20px;}
</style>
<body>
<div id="winbox">WINNER</div>
<div id="left"><img id="limg" src="https://via.placeholder.com/145"></div>
<div id="center"><img id="cimg" src="https://via.placeholder.com/150"></div>
<div id="right"><img id="rimg" src="https://via.placeholder.com/155"></div>

<script>
window.onload = function() {
var selector = Math.floor(Math.random() * 3) + 1;
if (selector == 1) document.getElementById("left").id = ("winner"), document.getElementById("limg").id = ("wimg");
else if (selector == 2) document.getElementById("center").id = ("winner"), document.getElementById("cimg").id = ("wimg");
else if (selector == 3) document.getElementById("right").id = ("winner"), document.getElementById("rimg").id = ("wimg");
}
</script>
</body>

最佳答案

已搬家

$("#winner").click(function() {
$("#wimg").attr('src', 'https://via.placeholder.com/190');
$("#winbox").css('显示', ' block ');
$("#winbox").css('z-index', '2');

在随机 div 选择后运行,而不是页面加载。

  $(document).ready(function() {
$("#left").click(function() {
$("#limg").attr('src', 'https://via.placeholder.com/175');
});

$("#center").click(function() {
$("#cimg").attr('src', 'https://via.placeholder.com/175');
});

$("#right").click(function() {
$("#rimg").attr('src', 'https://via.placeholder.com/175');
});

});
#winbox {
display: none;
background-color: red;
color: white;
padding: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id="winbox">WINNER</div>
<div id="left"><img id="limg" src="https://via.placeholder.com/145"></div>
<div id="center"><img id="cimg" src="https://via.placeholder.com/150"></div>
<div id="right"><img id="rimg" src="https://via.placeholder.com/155"></div>

<script>
window.onload = function() {
var selector = Math.floor(Math.random() * 3) + 1;
console.log(selector)
if (selector == 1) document.getElementById("left").id = ("winner"), document.getElementById("limg").id = ("wimg");
else if (selector == 2) document.getElementById("center").id = ("winner"), document.getElementById("cimg").id = ("wimg");
else if (selector == 3) document.getElementById("right").id = ("winner"), document.getElementById("rimg").id = ("wimg");
$("#winner").click(function() {
$("#wimg").attr('src', 'https://via.placeholder.com/190');
$("#winbox").css('display', 'block');
$("#winbox").css('z-index', '2');
});
}
</script>
</body>

关于javascript - Div ID 在屏幕加载时更改,但新的 id 脚本在点击时未触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59815453/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com