0

我对javascript相当陌生，并试图创建一个语言学习工具来播放音乐视频中的剪辑并显示翻译。我正在使用数组来组织和访问链接和翻译。但是，我一定遗漏了一些重要的东西，因为单击短语元素以显示每个视频和翻译没有任何效果。

http://jsfiddle.net/KireniaV/XaK7G/1/

我使用 Spliced 创建了剪辑，并通过 iFrame 显示它们（也尝试嵌入视频剪辑，但无论哪种方式都遇到了同样的问题）。

HTML：

<body>
    <div class="nav">
        <ul>
            <li id="phrase1">Ne dunun bamimyon byori doeji</li>
            <li id="phrase2">naui jibun dwidgolmog dalgwa byori tujiyo</li>
            <li id="phrase3">dubon dashin sengson gage tolji anha</li>
            <li id="phrase4">sorobge uldon naldul nanun wetorirane</li>
        </ul>
    </div>
    <div class="content">

<h3>Nangman Goyangi (Romantic Cat)</h3>


<h4>by Cherry Filter, lyrics and translation courtesy of DavichiLyrics</h4>

        <iframe id="player" title="player" src="http://www.youtube.com/v/U6EcOiKWfZI" width="341" height="192" frameborder="0" marginheight="0" marginwidth="0" id="myframe">You can't see iFrames :(.</iframe>
        <p id="text">Select a phrase from the song (to either side) to view a video clip, transcription, and translation!</p>
    </div>
    <div class="nav">
        <ul>
            <li id="phrase5">Ijen badaro tonalgoeyo (do jayurobge)</li>
            <li id="phrase6">gomiro gumulchyoso mulgogi jaburo</li>
            <li id="phrase7">Nanun nangman goyangi</li>
            <li id="phrase8">sulphun doshirul bichwo chumchunun jagun byolbid</li>
        </ul>
    </div>
</body>

CSS：

ul {
    list-style-type:none;
    margin:0;
    padding:0;
}
li {
    cursor:pointer;
    display:block;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#889999;
    width:120px;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
}
li:hover {
    background-color:#999988;
}
.nav {
    float: left;
}
.content {
    float: left;
    width: 341px;
}

Javascript：

var videos = [];
videos[1] = "http://www.youtube.com/v/U6EcOiKWfZI&start=26&end=31";
videos[2] = "http://www.youtube.com/v/U6EcOiKWfZI&start=31&end=37";
videos[3] = "http://www.youtube.com/v/U6EcOiKWfZI&start=38&end=42";
videos[4] = "http://www.youtube.com/v/U6EcOiKWfZI&start=43&end=49";
videos[5] = "http://www.youtube.com/v/U6EcOiKWfZI&start=49&end=54";
videos[6] = "http://www.youtube.com/v/U6EcOiKWfZI&start=55&end=60";
videos[7] = "http://www.youtube.com/v/U6EcOiKWfZI&start=60&end=65";
videos[8] = "http://www.youtube.com/v/U6EcOiKWfZI&start=65&end=72";


var translations = [];
translations[1] = "In the dark night, My eyes become stars.";
translations[2] = "I won’t rob a fish market again.";
translations[3] = "My weeping days and days, I’m quite alone.";
translations[4] = "Now, I will go to the sea.";
translations[5] = "To catch fish using spider’s web.";
translations[6] = "I’m a romantic cat.";
translations[7] = "I’m a tiny star twinkling over the lonely city.";
translations[8] = "My deep and sad sea, it has gone away.";

function changePhrase3(clicked) {
    var oldText = document.getElementById('text').innerHTML;
    var newText = translations[clicked];
    oldText = newText;
    document.getElementById('player').src = videos[clicked];
}

document.getElementById('phrase1').click(changePhrase(1));
document.getElementById('phrase2').click(changePhrase(2));
document.getElementById('phrase3').click(changePhrase(3));
document.getElementById('phrase4').click(changePhrase(4));
document.getElementById('phrase5').click(changePhrase(5));
document.getElementById('phrase6').click(changePhrase(6));
document.getElementById('phrase7').click(changePhrase(7));
document.getElementById('phrase8').click(changePhrase(8));
4

3 回答 3

0

只是一个错字和无效的电话。

我刚刚修好了。请结帐FIDDLE

首先将函数重命名changePhrase3为changePhrase（3 是错字）。

其次，您应该像这样绑定点击功能。（#不需要，使用onclick代替click）

document.getElementById('phrase1').onclick = function(){ changePhrase(1) };

因为如果你像这样绑定document.getElementById('phrase1').click(changePhrase(1));意味着你发送result of changePhrase(1)toclick函数。所以你必须在功能上扭曲它。

第三次changePhrase这样修改

function changePhrase(clicked){
    var newText = translations[clicked]; // get new text
    document.getElementById('text').innerHTML = newText; // assign to the old one
    document.getElementById('player').src = videos[clicked];
}
于 2013-10-06T04:01:31.217 回答
0

这里有一些小问题，

首先，正如 Patrick Evans 在评论中指出的那样，您的函数名称或函数调用中存在拼写错误。确保这些匹配。

其次，click()是一个jQuery方法；您使用的是直接 JS，因此您想使用“onclick”：

http://www.w3schools.com/jsref/event_onclick.asp

最后，getElementById不需要“#”符号。您在帖子中的代码中已经做到了这一点，但在小提琴中却没有。只需仔细检查您的实际代码中的情况。

总而言之，你应该为你的点击事件监听器得到这样的东西：

document.getElementById('phrase1').onclick=function(){changePhrase3(1)};

于 2013-10-06T03:38:48.937 回答
0

添加autoplay=1到您的 youtube 链接中，以便它们立即播放。

将您的一些 jQuery 函数更改click()为普通的 javascript onclick。

你不关心你翻译的旧文本是什么，只关心容器是什么，这样你就可以更新它，对吗？这应该让你开始：

var txtContainer = document.getElementById('text');
var newText = translations[clicked];
txtContainer.innerHTML = newText;
document.getElementById('player').src = videos[clicked];

结果如下：http: //jsfiddle.net/zyglobe/XaK7G/3/

Gomiro gumulchyoso mulgogi jaburo。

于 2013-10-06T03:59:31.440 回答