Question

更新：这是链接 http://15four.com/interactiveVideo/

好的，我正在开展一个基本上是“选择你自己的冒险”风格视频情况的项目。它的工作方式是：

播放视频
为播放器上的“已结束”状态设置事件侦听器
显示带有两个按钮的相应div
用户点击两个按钮之一
根据用户点击的按钮
重复

第一个视频的一切都很棒。 div加载得很好，单击按钮正确加载并播放下一个视频。问题是，当我到达第二个视频的末尾时，它应该显示 second 选择你自己的冒险div，它显示第一个和第二个CYOA div ，第二个位于第一个之上。

这是显示div的JS函数：

function loadModal(stage){
    var option1 = stage.modal.find("a.option1");
    var option2 = stage.modal.find("a.option2");

    var target1 = stage.option1;
    var target2 = stage.option2;

    stage.modal.fadeIn(1000);

    if(target1 != "div") {
        option1.click(function(){
            stage.modal.hide();
            console.log(target1);
            setMode(stages[target1]);
        });
    } else {
        setMode(stages.excite);
        video.pause();
    }
    if(target2 != "div") {
        option2.click(function(){
            stage.modal.hide();
            console.log(target2);
            setMode(stages[target2]);
        });
    } else {
        setMode(stages.excite);
        video.pause();
    }
}

以下是包含所有数据的变量：

var i = 0;
var video = _V_("player");

var stages = {
                "excite":   {
                                "video": "vid/Clip_1.mov",
                                "modal": $('#exciteModal'),
                                "option1": "commit",
                                "option2": "compete"
                            },
                "commit":   {
                                "video": "vid/Clip_2.mov",
                                "modal": $('#commitModal'),
                                "option1": "div",
                                "option2": "compete",
                                "aside1": "pdf1",
                                "aside1": "iWill",
                                "aside1": "displayVis",

                            },
                "compete":  {
                                "video": "vid/Clip_3.mov",
                                "modal": $('#competeModal'),
                                "option1": "div",
                                "option2": "div",
                                "aside1": "pdf2",
                                "aside1": "salesChamp",
                                "aside1": "numberCrunch",
                            }
            };

最后：div的标记

HTML

<div id="exciteModal" class="modals">
    <a class="option1" href="#1" data-target="commit">UA's Commitment</a>
    <a class="option2" href="#2" data-target="compete">Compete</a>
</div>
<div id="commitModal" class="modals">
    <a class="option1" href="#1" data-target="commit">Sign In</a>
    <a class="option2" href="#2" data-target="compete">Compete</a>
</div>
<div id="competeModal" class="modals">
    <a class="option1" href="#1" data-target="commit">Sign In</a>
    <a class="option2" href="#2" data-target="compete">Train</a>
</div>

CSS

#exciteModal, #commitModal, #competeModal {
  display: none; }

.modals {
  position: relative;
  margin-top: -540px;
  width: 960px;
  height: 540px;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1000; }
  .modals a {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    padding: 20px;
    border-radius: 10px;
    margin-top: 210px;
    border: 1px solid white;
    color: white; }

Answer 1

事实证明我为结束事件设置的事件监听器没有被删除，所以第二次结束事件发生时，有两个监听器正在监听它。

jQuery fadeIn（）应该只显示一个div，显示多个div

1 个答案: