个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我有一个问题，一开始是一个实际的问题，因为我想要一个包含视频的元素在视频结束时折叠，为此我需要添加一个事件监听器，但由于它不起作用，我开始进行一些测试和我不明白 JavaScript 是如何访问变量的。
好的，所以在我的元素中，我在 iframe 中有一个视频，如下所示:
html
<p> ...some tex...
<span id="clickable" class="link">click me to watch video</span>.<span><iframe id="frame" class="rect" src="iframe.html" scrolling="no" marginwidth=0 marginheight=0></iframe></span>
...some more tex...</p>
iframe 只有一个视频
内联框架:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="script2.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<video id="myVid" width="350" height="200" >
<source src="someVideo.mp4" type="video/mp4">
</video>
</body>
</html>
JavaScript 是这样的:
$(document).ready(function(){
$("#clickable").click(function(){
var rect = $(this).next().find('.rect');
if (rect.hasClass( "open" )){
rect.removeClass("open");
rect.contents().find("#myVid").get(0).pause();
} else {
rect.addClass("open");
rect.contents().find("#myVid").get(0).play();
}
});
和CSS
.rect{
float: left;
height: 0px;
width: 350px;
display: block;
margin: 0px;
padding: 0px;
opacity: 0;
transition-property: all;
transition-duration: 2s;
transition-timing-function: ease-in-out;
}
.open {
height: 200px;
width: 350px;
opacity: 1;
padding-bottom: 10px;
padding-top: 10px;
}
好的，这样就可以了。当我单击“可单击”链接时，javascript 将类“打开”添加到 iframe，这使得高度从 0 到 200 像素，因此视频幻灯片打开。然后，当我再次单击时，视频关闭。所以我想做的是添加一个功能，当视频完成此功能时，该功能也会关闭视频:
$('#myVid').on('ended',function(){
rect.removeClass("open");
alert('finished');
});
这就是问题开始的时候。问题是把这个功能放在哪里。如果我将它放在“可点击”功能之外，它会在视频结束时触发(出现警告框)，但视频不会折叠，所以我得出结论，它无法到达视频。然后我像这样修改了事件监听器:
$('#rickieVid').on('ended',function(){
if ($(rect).hasClass("open")){alert('has class')}
else {alert('has not');}
});
并且警告框显示:“没有”。所以这真的让我很困惑，因为“打开”类显然是用“可点击”事件添加的。有人可以帮我理解为什么这不起作用吗？非常感谢
===================================编辑=========== =======================
我也许应该提到我确实尝试将“rect”变量放在“可点击”函数之外以使其成为全局变量，如下所示:
$(document).ready(function(){
var rect;
$("#rickie").click(function(){
rect = $(this).next().find('.rect');
etc...
然后像这样修改我的函数以访问全局变量:
$('#rickieVid').on('ended',function(){
if (rect.hasClass("open")){alert('has class')}
else {alert('has not');}
});
由于出现此错误，仍然无法正常工作:
TypeError: undefined is not an object (evaluating 'rect.hasClass')
最佳答案
您可以通过将加载事件处理程序附加到 iframe jquery 对象来实现此目的，因为主文档已准备就绪，即使 iframe 源正在其中加载，有时视频控件也需要时间加载。
无论如何，在那种情况下，您需要设置全局播放器对象并将结束的事件处理程序附加到播放器。
要使用的 jQuery 代码:
$(document).ready(function(){
var frame = $("#frame");
var player;
frame.bind("load", function () {
player = $(this).contents().find("#myVid");
player.on('ended', function () {
frame.removeClass("open");
alert('finished');
});
});
$("#clickable").click(function(){
if (frame.hasClass("open"))
{
frame.removeClass("open");
player[0].pause();
}
else {
frame.addClass("open");
player[0].play();
}
});
});
这里要注意一点。如果 iframe 源是跨域 url，则 .contents() 将抛出安全错误。这仅在 iframe 源页面位于同一域内时有效。
关于javascript - javascript 中的变量范围 - 事件监听器未拾取，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40465011/
25
4
0
当单击复选框(或选择所有复选框)时，我想向 CheckboxSelectionModel 添加一个监听器。 var smSensors = new xg.CheckboxSelectionModel(
我有一个简单的程序，允许 2 个客户端连接到服务器。 连接后，他们可以轮流点击空白卡片图像。 一旦 2 个客户中的任何一个点击空白卡片图片，卡片图片将变为 Ace 俱乐部图片。 更改将显示在客户端的两
我在这里看到了一个代码，该代码以字符串的形式检索鼠标的当前图标，但是此代码使用了TTimer来实现。 因此，我想知道是否存在某些事件（侦听器）来检测鼠标光标图标上的这些更改。 下面是使用TTimer的
我想在我的配置对象上获得一个 onload 事件。 以下工作，除非我创建一个 config.listeners={..} (我认为这就是我需要的？)替换 this.onload({...}); 我什至
通常，在 Java 中，当我有一个向其他对象提供某种通知的对象时，我将使用 Listener/Observer 模式。 有没有更类似于 Scala 的方式来做到这一点？我应该在 Scala 中使用这种
我有一个带有动画器的游戏对象和一些可以触发事件的动画(具有特定的回调函数)。 只要我将脚本添加到与动画器相同的游戏对象(包括接收器)，一切都会正常工作: public class AnimatorEv
我有一个带有监听器的 DialogFragment，用于单击按钮以调用 fragment 中的函数。 我收到 lateinit property listener has not been initi
这个问题已经有答案了: Java ActionListener error: incompatible types (4 个回答) 已关闭 5 年前。 我最近刚刚开始学习 Java 代码。我在添加监听
我的代码遇到问题。我想知道是否有一种更简单的方法来使用监听器，而不是不断地这样做: example.addActionListener(new java.awt.event.ActionListene
有没有办法使用 .net 创建控制台应用程序。或通过某个端口监听 SMTP 消息的服务？ 我需要创建一个中间层对象来捕获和处理 smtp 消息。也就是说，我希望该监听器发送和接收 smtp 消息，然后
我有一个带有动画器的游戏对象和一些可以触发事件的动画(具有特定的回调函数)。 只要我将脚本添加到与动画器相同的游戏对象(包括接收器)，一切都会正常工作: public class AnimatorEv
我有许多向主事件生成服务注册的监听器。然而，我想告诉听众，事件流在某个时刻将会结束。您会通过简单地调用监听器上的方法(例如 finish())来完成此操作，还是有一个单独的事件方法 streamFin
我的代码有什么问题。 我创建了一个 JList，添加了项目并将其推到左侧(BorderLayout.WEST)。每次单击列表项时，我希望在列表右侧显示一个面板。但问题是，当选择列表项并运行监听器时，到
关闭。此题需要details or clarity 。目前不接受答案。 想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题. 已关闭 8 年前。 Improve th
这可能是一个简单的问题，但我没有看到它。 我有一个界面 public interface RenderableListener{ public void update(T element);
有人可以直接指出我的正确方向吗？当从组合框中选择适当的选项时，我希望小程序中的 Action 监听器显示从 html 文件检索的 jlabel 中的 3 个参数之一。 干杯 最佳答案 对于组合框，您需
我有一个网站，每个页面上都有许多 jQuery 事件处理程序，所有这些都在一个大型 .js 文件中。 这意味着对于任何页面，大多数事件处理程序都是针对不存在且根本不会使用的 HTML。 这会影响我的表
我有一些 jQuery 监听器设置，用于监听 type="text" 字段上的表单输入。但是，当用户从自动完成下拉框中选择一个选项(即他们之前输入的值已被记住以供将来使用)时，下面的监听器不会收集该值
关闭。这个问题需要多问focused 。目前不接受答案。 想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post . 已关闭 9 年前。 Improve this ques
我正在用 unity (c#) 做一个类似国际象棋的游戏，但我在尝试进行向上转换以将信息从一个 child 发送到另一个抽象类时遇到了困难。 基本上，我有一个抽象类，它有一个带有函数的事件/委托(de
我是一名优秀的程序员,十分优秀！