Question

我在这里有点棘手。请记住，我对web dev非常新。我试图在点击文本时使用淡入和幻灯片打开视频。我正在使用iframe，因为它允许我避免jquery的滑动功能，除非它被缓存，否则它不够平滑。我之前从未使用过iframe，而且我遇到了不想要的行为。当我点击一个链接，所有视频，打开。见gif：

这是我的代码。为了清楚起见，我已经编辑了文本。

我的方式是，所有视频都有一个让它们崩溃的类，并且我在javascript中添加了一个“开放”类。但正如我所说，它似乎针对所有这些。任何帮助赞赏。 P

HTML：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <link rel="stylesheet" type="text/css" href="styles.css">

</head>
<body> 
<div id="wrap">

<p id="text"> Lorem ipsum dolor...
    <span id="link1">link 1</span> 
    <span id="wrap1">
        <iframe  id="frame" class="rect" src="iframe.html" scrolling="no" marginwidth=0 marginheight=0></iframe>
    </span>
....Lorem ipsum dolor...
    <span id="link2">link 2</span>
    <span id="wrap2">
        <iframe  id="frame2" class="rect" src="iframe2.html" scrolling="no" marginwidth=0 marginheight=0></iframe>
    </span>
 ....Lorem ipsum dolor sit amet...
</p>

</div>
    <script type="text/javascript" src="jquery.js"></script>
    <script src="script.js" type="text/javascript"></script>
</body>
</html>

CSS：

#wrap{
    margin: 100px auto;
    width: 350px;
}

p{
    line-height: 2em;
}

iframe {
    border:0 none;
}

.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;
}

#link1{
    color: red;
    cursor: pointer;    
}

#link2{
    color: red;
    cursor: pointer;
}

JavaScript的：

  $(document).ready(function(){

    $("#link1").click(function(){


        if ($( ".rect" ).hasClass( "open" )){

            $(".rect").removeClass("open");

            $("body").find("iframe").contents().find("#pasc").get(0).pause();

        } else {

        $(".rect").addClass("open");

       $("body").find("iframe").contents().find("#vid1").get(0).play();
        }
    });

    $("#link2").click(function(){


        if ($( ".rect" ).hasClass( "open" )){

            $(".rect").removeClass("open");

            $("body").find("iframe").contents().find("#vid2").get(0).pause();


        } else {

        $(".rect").addClass("open");

         $("body").find("iframe").contents().find("#vid2").get(0).play();
        }  
    });
    });

iframe1：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="jquery.js"></script>   
    <script type="text/javascript" src="script.js"></script>
    <link rel="stylesheet" type="text/css" href="styles.css">       
</head>
<body>
    <video id="vid1" width="350" height="200" >
        <source src="video1.mp4" type="video/mp4">
    </video>
</body>
</html>

iframe2：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="jquery.js"></script>   
    <script type="text/javascript" src="script.js"></script>
    <link rel="stylesheet" type="text/css" href="styles.css">       
</head>
<body>
    <video id="vid2" width="350" height="200" >
        <source src="video2.mp4" type="video/mp4">
    </video>
</body>
</html>

Answer 1

问题在于这一行：

$(".rect").addClass("open");

您要将open类添加到具有.rect类的所有元素。

您需要使用iframe ID，因此您只能定位特定的iframe，例如：

$("#frame2").addClass("open");

Answer 2

<强> Working fiddle

当您使用$(".rect")时，它会定位所有带有rect类的元素，当您致电$("body").find("iframe")时，它会定位到页面中的所有iframe，并且您和＃39;这里有问题。

所以为了避免您可以使用当前对象$(this)使用点击的iframe引用相关的link：

$(this).next().find('.rect');

因此，您可以将其存储在变量中，只需使用它来触发所有其他函数：

$("#link1").click(function(){
    var rect = $(this).next().find('.rect');

    if (rect.hasClass( "open" ))
    {
        rect.removeClass("open");
        rect.contents().find("#pasc").get(0).pause();
    } else {
        rect.addClass("open");
        rect.contents().find("#vid1").get(0).play();
    }
});

$("#link2").click(function(){
    var rect = $(this).next().find('.rect');

    if (rect.hasClass( "open" ))
    {
        rect.removeClass("open");
        rect.contents().find("#vid2").get(0).pause();
    } else {
        rect.addClass("open");
        rect.contents().find("#vid2").get(0).play();
    }
});

希望这有帮助。

iframe和过渡的不需要的行为

2 个答案: