Question

我是Javascript的新手，所以我很欣赏恩典......

一个。我想应用getelementbyId函数（我认为）没有 JQuery和

B中。我想将它应用到整个表格中，但每个元素都有不同的悬停图像或状态......任何帮助都非常感谢！

<code>
<article class="main_display">  
<p style="text-align: center;"><iframe id="bigVideo" width="850" height="500" src="http://player.vimeo.com/video/45587075?rel=0&autoplay=0&modestbranding=1&wmode=Opaque" frameborder="0" allowfullscreen></iframe>
<table width="142" cellspacing="1" cellpadding="2" id="mouseOvers">
  <tr>
    <td><a href="#" onclick="$('#bigVideo').attr('src', 'http://player.vimeo.com/video/46124645?rel=0&autoplay=1&modestbranding=1&wmode=Opaque')" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','http://s3.amazonaws.com/worship/graphics/worshipmadness/play_rollover.jpg',1)"><img src="http://s3.amazonaws.com/worship/graphics/worshipmadness/week1_vid.jpg" name="Image7" width="140" height="142" border="0" id="Image7" /></a></td>
    <td><a href="#" onclick="$('#bigVideo').attr('src', 'http://player.vimeo.com/video/46117474?rel=0&autoplay=1&modestbranding=1&wmode=Opaque')" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','http://s3.amazonaws.com/worship/graphics/worshipmadness/play_rollover.jpg',1)"><img src="http://s3.amazonaws.com/worship/graphics/worshipmadness/week2_vid.jpg" name="Image2" width="142" height="142" border="0" id="Image2" /></a></td>
    <td><a href="#" onclick="$('#bigVideo').attr('src', 'http://player.vimeo.com/video/46117474?rel=0&autoplay=1&modestbranding=1&wmode=Opaque')"  onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','http://s3.amazonaws.com/worship/graphics/worshipmadness/play_rollover.jpg',1)"><img src="http://s3.amazonaws.com/worship/graphics/worshipmadness/week3_vid.jpg" name="Image3" width="142" height="142" border="0" id="Image3" /></a></td>
    <td><a href="#" onclick="$('#bigVideo').attr('src', 'http://player.vimeo.com/video/46119637?rel=0&autoplay=1&modestbranding=1&wmode=Opaque')"  onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','http://s3.amazonaws.com/worship/graphics/worshipmadness/play_rollover.jpg',1)"><img src="http://s3.amazonaws.com/worship/graphics/worshipmadness/week4_vid.jpg" name="Image4" width="142" height="142" border="0" id="Image4" /></a></td>
    <td><a href="#" onclick="$('#bigVideo').attr('src', 'http://player.vimeo.com/video/46121214?rel=0&autoplay=1&modestbranding=1&wmode=Opaque')"  onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','http://s3.amazonaws.com/worship/graphics/worshipmadness/play_rollover.jpg',1)"><img src="http://s3.amazonaws.com/worship/graphics/worshipmadness/week5_vid.jpg" name="Image5" width="142" height="142" border="0" id="Image5" /></a></td>
    <td><a href="#" onclick="$('#bigVideo').attr('src', 'http://player.vimeo.com/video/46123371?rel=0&autoplay=1&modestbranding=1&wmode=Opaque')"  onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','http://s3.amazonaws.com/worship/graphics/worshipmadness/play_rollover.jpg',1)"><img src="http://s3.amazonaws.com/worship/graphics/worshipmadness/week6_vid.jpg" name="Image6" width="142" height="142" border="0" id="Image6" /></a></td>
  </tr>
</table>
</p>
</article>
</code>

Answer 1

如果您的问题是：“如何使用普通的javascript替换onclick处理程序中的表中的jQuery”，那么您可以这样做：

<td><a href="#" onclick="document.getElementById('bigVideo').src = 'http://player.vimeo.com/video/46124645?rel=0&autoplay=1&modestbranding=1&wmode=Opaque')" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','http://s3.amazonaws.com/worship/graphics/worshipmadness/play_rollover.jpg',1)"><img src="http://s3.amazonaws.com/worship/graphics/worshipmadness/week1_vid.jpg" name="Image7" width="140" height="142" border="0" id="Image7" /></a></td>

在此演示中，使用您的HTML /代码似乎对我有用：http://jsfiddle.net/jfriend00/5cqgj/

如果你想问一些不同的东西，请澄清你想要完成的事情。

Answer 2

我建议使用CSS进行翻转：

<style>
      #Image2 div, #Image3 div, #Image4 div, #Image5 div, #Image6 div, #Image7 div { width:142px; height:142px; }
      #Image7 div { width:140px; } /*is it suppose to have a different width than the others? and is the id suppose to be "Image7" and not "Image1" ?*/
      #Image2 div { background:url(http://s3.amazonaws.com/worship/graphics/worshipmadness/week2_vid.jpg); }
      #Image3 div { background:url(http://s3.amazonaws.com/worship/graphics/worshipmadness/week3_vid.jpg); }
      #Image4 div { background:url(http://s3.amazonaws.com/worship/graphics/worshipmadness/week4_vid.jpg); }
      #Image5 div { background:url(http://s3.amazonaws.com/worship/graphics/worshipmadness/week5_vid.jpg); }
      #Image6 div { background:url(http://s3.amazonaws.com/worship/graphics/worshipmadness/week6_vid.jpg); }
      #Image7 div { background:url(http://s3.amazonaws.com/worship/graphics/worshipmadness/week1_vid.jpg); }       
      #Image2 div:hover, #Image3 div:hover, #Image4 div:hover, #Image5 div:hover, #Image6 div:hover, #Image7 div:hover { background:url(http://s3.amazonaws.com/worship/graphics/worshipmadness/play_rollover.jpg); }
</style>

为视频转换器创建一个功能：

<script type="text/javascript">
    function bigVideo(src) { // this is regular javascript no JQuery
        var url      = 'http://player.vimeo.com/video/';
        var settings = '?rel=0&autoplay=1&modestbranding=1&wmode=Opaque';
        document.getElementById('bigVideo').src = url + src + settings;
    }
</script>

这样做可以清理你的HTML。

<article class="main_display">  
    <p style="text-align: center;">
    <iframe id="bigVideo" width="850" height="500" src="http://player.vimeo.com/video/45587075?rel=0&autoplay=0&modestbranding=1&wmode=Opaque" frameborder="0" allowfullscreen></iframe>

    <table width="142" cellspacing="1" cellpadding="2" id="mouseOvers">
      <tr>
        <td><a id="Image7" href="#" onclick="bigVideo('46124645');"><div></div></a></td>

        <td><a id="Image2" href="#" onclick="bigVideo('46117474');"><div></div></a></td>

        <td><a id="Image3" href="#" onclick="bigVideo('46117474');"><div></div></a></td>

        <td><a id="Image4" href="#" onclick="bigVideo('46119637');"><div></div></a></td>

        <td><a id="Image5" href="#" onclick="bigVideo('46121214');"><div></div></a></td>

        <td><a id="Image6" href="#" onclick="bigVideo('46123371');"><div></div></a></td>
      </tr>
    </table>

    </p>
    </article>

回顾：

1-用“div”标签替换“img”标签，并将id传递给“a”标签。这允许我们使用css进行翻转的背景图像。

2-创建一个替换视频源的函数，并在函数内保留所有未更改的数据，并将更改的变量传递给函数。

这导致更清晰的HTML。理想情况下，您希望尝试保持html css和javascript分开。甚至你的表都有可以传递给css的属性。

Javascript getelementbyId iframe合并

2 个答案: