Javascript 带有SetTimeout的简单jQuery支付墙_Javascript_Jquery

Javascript 带有SetTimeout的简单jQuery支付墙

javascript jquery

Javascript 带有SetTimeout的简单jQuery支付墙,javascript,jquery,Javascript,Jquery,我目前正在开发一个非常简单的付费墙版本，它基本上允许用户在隐藏视频和显示付费墙之前，先观看一段特定时间的视频。一旦通过表单注册，就可以观看视频而不受功能的干扰以下是我的玩具示例： <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script

我目前正在开发一个非常简单的付费墙版本，它基本上允许用户在隐藏视频和显示付费墙之前，先观看一段特定时间的视频。一旦通过表单注册，就可以观看视频而不受功能的干扰

以下是我的玩具示例：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

$(document).ready(function(){
    $(".video").show();
    $(".paywall").hide();
    var reg = false;
    $(".video").click(function(){
        if (reg == true) {
            var credit = true;
        } else {
            paywall();
        }
    }); 

    $(".form").click(function(){
        register();
        alert("You have been registered");
    });
 });


function paywall(){
    setTimeout(function(){
        $(".video").hide();
        $(".paywall").show();
        var credit = false;
    }, 2000);
}

function register(){
    var reg = true;
    $(".video").show();
    $(".paywall").hide();
}

</script>
</head>
<body>

<div class="video">Video Player</div>
<div class="paywall">PAYWALL</div>

<hr>
<div class="form">Form</div>

</body>
</html>


$（文档）.ready（函数（）{
$（“.video”）.show（）；
$（“.paywall”）.hide（）；
var reg=假；
$（“.video”）。单击（函数（）{
如果（reg==true）{
var信用=真实；
}否则{
支付墙（）；
}
}); 
$（“.form”）。单击（函数（）{
寄存器（）；
警报（“您已注册”）；
});
});
函数paywall（）{
setTimeout（函数（）{
$（“.video”）.hide（）；
$（“.paywall”）.show（）；
var信用=假；
}, 2000);
}
函数寄存器（）{
var reg=真；
$（“.video”）.show（）；
$（“.paywall”）.hide（）；
}
视频播放器
付费墙

形式

然而，似乎我把smth搞砸了。使用

var reg

，这样即使有人已经注册，只要点击一下就可以触发付费墙。

问题在于变量的范围，特别是

register（）

中的on仅在

register（）中声明，并且仅在register（）中可用
不使用全局变量，您可以将函数移动到doc.ready中，并使用doc.ready中声明的变量：
$(document).ready(function(){
    $(".video").show();
    $(".paywall").hide();
    var reg = false;
    var credit = false;

    $(".video").click(function(){
        if (reg == true) {
           credit = true;
        } else {
            paywall();
        }
    }); 

    $(".form").click(function(){
        register();
        alert("You have been registered");
    });

    function paywall(){
        setTimeout(function(){
            $(".video").hide();
            $(".paywall").show();
            credit = false;
        }, 2000);
    }

    function register(){
        // no `var` here, use the one declared above
        reg = true;
        $(".video").show();
        $(".paywall").hide();
    }
 });

与“信用”相同。
根据上述问题，它是固定代码。逻辑上有个问题
如果（！reg）->已注册，则需要立即显示墙）
我相信这是上述问题的答案，它满足了他的问题，但没有任何理由反对


$（文档）.ready（函数（）{
$（“.video”）.show（）；
$（“.paywall”）.hide（）；
var reg=假；
var信用=假；
$（“.video”）。单击（函数（）{
如果（！reg）
信用=真实；
其他的
支付墙（）；
}); 
$（“.form”）。单击（函数（）{
寄存器（）；
警报（“您已注册”）；
});
函数paywall（）{
setTimeout（函数（）{
$（“.video”）.hide（）；
$（“.paywall”）.show（）；
信用=虚假；
}, 2000);
}
函数寄存器（）{
reg=真；
$（“.video”）.show（）；
$（“.paywall”）.hide（）；
}
});
视频播放器
付费墙

形式
请确认answer@nic请确认，无论我纠正了什么，你的问题是否得到了解决？是否有理由投反对票？它正按照上述要求工作。逻辑上有个问题。这是上述问题的答案，它满足了他的问题，但没有任何理由说明OPs代码中的错误不是由逻辑直接引起的——而是由范围引起的。设置var reg=true
不会设置与if（reg）
相同的变量。您无意中在示例中修复了此问题，但没有解释这是潜在的问题。也可能存在逻辑错误，但这不是OPs问题。注意到。谢谢@freedomn-m。以后我做清楚的解释。我看到了逻辑错误，然后修复了它。非常感谢！我以为事情就是这么简单。