带有jQuery点击功能的两个独立事件

Two separate events with jQuery click function

本文关键字：两个 独立 事件 jQuery 功能 带有      更新时间：2023-09-26

我正在尝试创建一个电视模拟，用户点击电源按钮，它会加载一个外部HTML文件，该文件只是一个视频（出于造型等目的，封装在div中）到电视图像中（这是一个以电视图像为背景的div，使其看起来像有人在打开并观看电视）。然而，我也想让用户能够关闭电视。目前我已经成功地在按下电源按钮时加载了外部html文件（其中包含视频）。我需要知道如何为同一个按钮创建"关闭"功能，而不是让该按钮重复"打开"功能。

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

我真的在寻找这个理论，这样我就可以知道我必须做什么以及如何做，但这是目前打开电视的jQuery

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

重要的是，用户认为电源按钮正在打开和关闭电视，即使通过第一次/初始点击在电源按钮上放置了一些覆盖或不可见元素。

您可以简单地使用一个变量来存储电视是否打开的"状态"：

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();
});

我不确定这是否真的可行，但我认为会的。

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

只需在两者之间添加一个toggle()方法，就可以进行切换。然而，它仍然会在后台播放视频，等等。要真正了解其他内容，还需要更多的代码。

相关文章：