Javascript 带有iFrame和transitions的不必要行为_Javascript_Jquery_Html_Css_Iframe

Javascript 带有iFrame和transitions的不必要行为

javascript jquery html css iframe

Javascript 带有iFrame和transitions的不必要行为,javascript,jquery,html,css,iframe,Javascript,Jquery,Html,Css,Iframe,我这里有点棘手。请记住，我对web开发非常陌生。我正在尝试在单击文本时使用淡入和幻灯片打开视频。我使用iframes，因为它可以避免jquery的滑动函数，除非缓存它，否则它不够平滑。我以前从未使用过iFrame，现在我遇到了不想要的行为。当我点击一个链接，所有的视频，打开。参见gif：这是我的密码。为了清楚起见，我把这段文字删去了我的做法是，所有视频都有一个类，该类将它们折叠，并使用javascript添加一个“open”类。但正如我所说，它似乎针对所有人。谢谢你的帮助。P html:

我这里有点棘手。请记住，我对web开发非常陌生。我正在尝试在单击文本时使用淡入和幻灯片打开视频。我使用iframes，因为它可以避免jquery的滑动函数，除非缓存它，否则它不够平滑。我以前从未使用过iFrame，现在我遇到了不想要的行为。当我点击一个链接，所有的视频，打开。参见gif：

这是我的密码。为了清楚起见，我把这段文字删去了

我的做法是，所有视频都有一个类，该类将它们折叠，并使用javascript添加一个“open”类。但正如我所说，它似乎针对所有人。谢谢你的帮助。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>

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

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

<!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>

<!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>

JavaScript:

<!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>

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

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

<!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>

<!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>

iframe1:

<!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>

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

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

<!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>

<!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>

iframe2:

<!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>

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

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

<!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>

<!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>

当您使用

$（“.rect”）

时，它将以类

rect

的所有元素为目标，调用

$（“body”）时也是如此。find（“iframe”）

它将以页面中的所有iframe为目标，而您在这里遇到了问题

因此，为了避免出现这种情况，您可以使用当前对象

$（this）

通过单击

链接来引用相关的iframe
，方法是：
$(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();
    }
});

希望这有帮助。
问题在于这行：
$(".rect").addClass("open");

您正在将open
类添加到拥有.rect
类的所有元素中
您需要改用iframe id，以便只针对特定的iframe，如：
$("#frame2").addClass("open");

单击链接时，您的目标是所有iFrame。将$（“body”）。查找（“iframe”）
为$（此）。下一步（“iframe”）
谢谢。这很有帮助。您是否知道是否有一种方法不必使用两个iframe文件。。。我可以把两个视频放在一个视频上吗？德克萨斯州