Question

这是我正在制作的一个项目，我的客户网站上的一个小弹出广告，将告诉用户他们的夏令营即将到来。我只是希望广告在加载时显示，然后用户可以选择关闭广告或点击链接转到注册页面。

我想让这段代码正常运行，但我的问题是，当我点击其中一个关闭按钮时，广告会关闭，然后页面会重新加载，广告就会回到原来的位置。我试图弄清楚在哪里适当地放置我的“防止默认”代码，但它可以在广告第一次显示之前有效，或者在此处显示的情况下......根本不显示。

我意识到我正在使用jQuery和JS，但我对此非常新，并且在找到代码时拼凑代码。

<script type="text/javascript">
$(".close").click(function(){
$("#summercampad").addClass("hidden");
onload.preventDefault();

});

window.onload = function () {
document.getElementById("summercampad").className =
document.getElementById("summercampad").className.replace
  ( /(?:^|\s)hidden(?!\S)/g , '' )
};

</script>
<div id="summercampad" class="hidden" >
<div id="popupcontainer">
    <div id="closepopup">
        <a href="#" class="close"><img src="https://cdn6.bigcommerce.com/s-p98jqjm/product_images/uploaded_images/closebtn.png?t=1429039040" alt="close"/>     </a>
    </div>
    <div id="pic">
        <img src="https://cdn6.bigcommerce.com/s-p98jqjm/product_images/uploaded_images/popuppic.jpg?t=1429038436" alt="basketball"/>
    </div>
    <div id="popuptext">
        2015 SUMMER CAMPS<br> 
        BOYS &amp; GIRLS • ANY SKILL LEVEL<br>
        <span>SPACE LIMITED - SIGN UP NOW!</span>
    </div>
    <div id="registerbtn" >
        <a href="/camp-registration/">
        <img src="https://cdn6.bigcommerce.com/s-p98jqjm/product_images/uploaded_images/registerbtn.png?t=1429039883"/>
        </a>
    </div>
    <div id="nobtn">
        <a href="#" class="close">
        <img src="https://cdn6.bigcommerce.com/s-p98jqjm/product_images/uploaded_images/nothanksbtn.png?t=1429039884"/>
        </a>
    </div>
</div>

Answer 1

 <script type="text/javascript">
    $(".close").click(function(e){
    e.preventDefault();
        $("#summercampad").addClass("hidden");
        return false;
    });
   </script>

Answer 2

您似乎错过了绑定功能中的参数。尝试更改此内容：

$(".close").click(function(){
    $("#summercampad").addClass("hidden");
    onload.preventDefault();
});

到此：

$(".close").click(function(event){
    $("#summercampad").addClass("hidden");
    event.preventDefault();
});

（资料来源：http://www.w3schools.com/jquery/event_preventdefault.asp）

Answer 3

最后添加：return false。它会阻止动作按您的意愿执行。

<script type="text/javascript">
$(".close").click(function(){
    $("#summercampad").addClass("hidden");
    return false;
});
...

所有内容都在另一篇文章中描述：return false from jQuery click event

另外

首先需要声明HTML，然后是jQuery。就像你现在一样，$（“。close”）返回null，因为浏览器尚未解析HTML。

最适合您的方法是使用$(document).ready()

您的代码应为：

<script type="text/javascript">
    $(document).ready(function () {
        $(".close").click(function(){
        $("#summercampad").addClass("hidden");
        return false;
    });
});
...

这样首先加载HTML然后jQuery绑定现有标记上的click事件;）。

Answer 4

我相信这就是你想要的

$(".close").click(function(e) {
  $("#summercampad").addClass("hidden");
  e.preventDefault();
});

你也可以使用

$('#summercampad').removeClass('hidden');

而不是

document.getElementById("summercampad").className =
document.getElementById("summercampad").className.replace
  ( /(?:^|\s)hidden(?!\S)/g , '' )

http://api.jquery.com/event.preventdefault/

The difference between ‘return false;’ and ‘e.preventDefault();’

Answer 5

下面的代码应该可以解决问题。你要做的是禁止onload。可以使用$（document）.ready（）实现。我建议把它放在页面的末尾。

    <script type="text/javascript">
$(document).ready(function(){
    $(".close").click(function(e){
    e.preventDefault();
        $("#summercampad").addClass("hidden");
        return false;
    });
});
   </script>

试图防止违约

5 个答案:

另外