Question

我可以帮助纠正下面的代码吗？您可以复制并粘贴并自行尝试。 Onmouseover弹出div出现。如果我点击（X）弹出div应该关闭，但它不会。只需双击（X）即可关闭弹出窗口div。 Onmouseover它应该总是显示一个弹出式div。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

</head>
<style type="text/css">
.container {
display:block;
width:500px;
height:200px;
border:1px solid green;
}
.advert {
float:right;
overflow:hidden;
width:100px;
height:30px;
border:1px solid red;
}
.close {
float:right;
width:20px;
height:28px;
cursor:pointer;
border:1px solid black;
}
</style>
<body>

<div class="container" onmouseover='getad(39);' onmouseout='hidead(39);changeback(39);'>
<div class='advert' id="39"  style="display:none;"><div class="close"><a href="javascript:closead(39)">X</a></div></div>
<input type="text" value="1" id="ad39" />
</div>


<div class="container" onmouseover='getad(40);' onmouseout='hidead(40);changeback(40);'>
<div class='advert' id="40" style="display:none;"><div class="close"><a href="javascript:closead(40)">X</a></div></div>
<input type="text" value="1" id="ad40" />
</div>

<script type="text/javascript">

function getad(number) {

    if(document.getElementById('ad'+number).value==1) {
        if(document.getElementById(number).style.display == "none") {
        document.getElementById(number).style.display = "block";

        }
    }

} 

function hidead(number) {

    if(document.getElementById('ad'+number).value==1) {
        if(document.getElementById(number).style.display == "block") {
        document.getElementById(number).style.display = "none";

        }
    }
} 

function closead(number) {

    document.getElementById('ad'+number).value = 0;
    if(document.getElementById(number).style.display == "block") {
        document.getElementById(number).style.display = "none";

        }



    }

    function changeback(number) {

    if(document.getElementById('ad'+number).value==0) {


    document.getElementById('ad'+number).value = 1;

    }
    }
</script>
</body>
</html>

Answer 1

您的ID错误：

<div class='advert' id="39"  style="display:none;">
<div class='advert' id="40" style="display:none;">

应该是：

<div class='advert' id="ad39"  style="display:none;">
<div class='advert' id="ad40" style="display:none;">

Answer 2

我在firefox中尝试了你的代码，但它确实有用。

在IE8中，它不起作用。

这是你永远不应该写原生Javascript的主要原因......

使用JQuery或其他JS框架。

首先，它将使您的代码与浏览器兼容。其次，只有一行代码可以完成你需要做的事情; - ）

类似$（＃39）.hide（）或$（＃39）.show（）

Answer 3

问题不在于您的广告未被删除。这是为了单击触发hidead（）函数的链接，您还必须将鼠标光标悬停在鼠标悬停时触发getad（）的div上。

因此，如果您单步执行操作，实际执行的是这个。

点击“X-link”标签上的事件触发器 closead（number）触发并执行它的代码。 Mouseout事件触发并传播到父级隐藏（数字）触发并执行。 Mouseover事件触发并传播到父级 getad（number）触发并执行。

因此您的事件正在卸载，然后立即重新加载。也许如果您能提供一些背景信息，我们可以帮助您实现这一目标。我不确定您在什么情况下要在鼠标悬停时加载广告，在鼠标移动时隐藏它，并为用户提供关闭按钮。这似乎是很多加载/卸载/闪存内容会让访问者烦恼，而不仅仅是通过AJAX或其他东西每隔X秒重新加载静态广告。

帮助关闭弹出div javascript

3 个答案: