javascript - jQuery fadeIn() 应该只显示一个 div，正在显示多个 div

Question

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

好吧，我正在做一个基本上是“选择你自己的冒险”风格的视频场景的项目。因此它的工作方式是:

1. 播放视频
2. 为播放器上的“结束”状态设置事件监听器
3. 用两个按钮显示相应的div
4. 用户点击两个按钮之一
5. 根据他们点击的按钮加载相应的视频
6. 重复

第一个视频一切正常。 div 加载得很好，单击按钮正确加载并播放下一个视频。问题是，当我到达second 视频的结尾时，它应该显示 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

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