Question

我正在尝试创建一个电视模拟，用户点击电源按钮，然后加载一个外部HTML文件，这只是一个视频（包含在DIV中用于样式目的等）到电视图像中（是一个以电视图像为背景的div，让它看起来像有人正在开启和看电视）。但是，我还希望用户能够关闭电视。目前，我已经成功地在按下电源按钮时加载外部html文件（包含视频）。我需要知道如何创建＆＃34;关闭＆＃34;同一个按钮的功能，没有那个按钮重复＆＃34;打开＆＃34;功能

我猜我必须使用按钮制作两个功能，当打开时还会加载一个div覆盖在电源按钮的顶部，然后将其作为要点击以关闭电视的元素一个单独的jquery或JS fucntion？因为如果再次按下电源按钮，它会重复打开功能吗？

我真的在寻找这个理论，所以我可以知道我必须做什么以及如何做，但这是当前正在开启电视的jQuery。

$("#switch").on("click",function(){
    $("#broadcast").load("shows.html");
});

用户认为电源按钮正在打开和关闭电视是很重要的，即使有一些叠加或不可见的元素由于第一次/初始点击而放置在电源按钮的顶部。

Answer 1

你可以简单地使用一个变量来存储电视是否开启的“状态”：

var tvOn = false;
$("#switch").on("click", function () { 
    var $el = $('#broadcast');

    if (tvOn) {
        $el.empty();
    }
    else {
        $el.load("shows.html");
    }

    tvOn = !tvOn;
});

或者，如果shows.html文件是静态内容，您可以加载一次以开始，然后在单击按钮时显示/隐藏容器：

var $el = $('#broadcast');
$el.load("shows.html");

$("#switch").on("click", function () {
    $el.toggle();
});

Answer 2

我不确定这是否真的有效，但我认为它会。

$("#switch").on("click",function(){
    $("#broadcast").toggle().load("shows.html");
});

只需在其间添加toggle()方法，即可切换它。但是，它仍然会在后台播放视频等。你需要更多的代码才能真正理解你还有什么。

两个单独的事件与jQuery单击功能

2 个答案: