javascript - 尝试将数据从.php文件传递到.js文件

原文 标签 javascript php html

Trying to pass data from a .php file to a .js file

i'm trying to build a website which has a video section. The problem that i've encountered is that in order to change the video in the '.video-player' i need to pass data(the name of the video) which is inside a database from my index.php file to my scriptz.js file.

What i've tried so far is to echo that data in a div and retrieve it using document.getElementbyId in javascript which doesn't seem to work. Here is the code

INDEX.php

<ul class="video-list">
<?php
while($videotemp=mysql_fetch_array($ris))
{
?>
    <li class="video-element">
        <div class="image-duration">
            <img class="video-thumbnails" src="images/<?php echo $videotemp["thumbnails"] ;?>"/>
            <p class="duration"><?php echo number_format($videotemp["duration"]/100,0);?>:<?php echo $duration2=$videotemp["duration"]%100; ?></p>
        </div>
        <p class="video-title"><?php echo $videotemp["author"];?> - <?php echo $videotemp["name"] ;?></p>
        <div id="source"><?php echo $videotemp["source"]  ?></div>
    </li>
<?php   
}
?>
</ul>

<video id="video-player"  preload="auto" data-setup="{}"  controls  >
    <source id="mp4" src="" type="video/mp4" />
    <source id="ogv" src="" type="video/ogv" />
    <source id="webm" src="" type="video/webm" />
</video>

Cese.css

#source{
visibility:hidden;
}

Scriptz.js

$('.video-element').click(function(){
        var $videosource=document.getElementById("source");

            document.getElementById('mp4').setAttribute('src','videos/'+$videosource + ".mp4");
            document.getElementById('ogv').setAttribute('src','videos/'+$videosource + ".ogv");
            document.getElementById('webm').setAttribute('src','videos/'+$videosource + ".webm");
            $("#video-box")[0].load();

    });

Up to any suggestions , thanks in advance.

Answer

Add innerHTML.

You want the string inside the ID not the ID itself.

So : var $videosource=document.getElementById("source").innerHTML;

翻译

我正在尝试建立一个具有视频部分的网站。我遇到的问题是,为了更改“ .video-player”中的视频,我需要将数据库内部的数据(视频名称)从index.php文件传递到scriptz。 js文件。

到目前为止,我尝试过的是在div中回显该数据,并使用javascript中似乎无法正常工作的document.getElementbyId进行检索。这是代码

INDEX.php

<ul class="video-list">
<?php
while($videotemp=mysql_fetch_array($ris))
{
?>
    <li class="video-element">
        <div class="image-duration">
            <img class="video-thumbnails" src="images/<?php echo $videotemp["thumbnails"] ;?>"/>
            <p class="duration"><?php echo number_format($videotemp["duration"]/100,0);?>:<?php echo $duration2=$videotemp["duration"]%100; ?></p>
        </div>
        <p class="video-title"><?php echo $videotemp["author"];?> - <?php echo $videotemp["name"] ;?></p>
        <div id="source"><?php echo $videotemp["source"]  ?></div>
    </li>
<?php   
}
?>
</ul>

<video id="video-player"  preload="auto" data-setup="{}"  controls  >
    <source id="mp4" src="" type="video/mp4" />
    <source id="ogv" src="" type="video/ogv" />
    <source id="webm" src="" type="video/webm" />
</video>


Cese.css

#source{
visibility:hidden;
}


Scriptz.js

$('.video-element').click(function(){
        var $videosource=document.getElementById("source");

            document.getElementById('mp4').setAttribute('src','videos/'+$videosource + ".mp4");
            document.getElementById('ogv').setAttribute('src','videos/'+$videosource + ".ogv");
            document.getElementById('webm').setAttribute('src','videos/'+$videosource + ".webm");
            $("#video-box")[0].load();

    });


多达任何建议,在此先感谢。
最佳答案
添加innerHTML。

您希望ID内的字符串不是ID本身。

因此:var $ videosource = document.getElementById(“ source”)。innerHTML;
相关推荐

javascript - 网页滚动到右侧,宽度无限扩展

javascript - 未被捕获的TypeError:无法使用相位器读取未定义的属性“ apply”

javascript - Ruby生成的javascript文件不会在页面刷新时更新

javascript - Newton Raphson方法JavaScript

javascript - 为什么要循环修改行(Javascript)中未引用的其他变量?

javascript - 在变量索引处插入字符串

javascript - 更改模型后ng-repeat不更新

javascript - 如何在Promise.all()中使用if表达式?

javascript - 访问URL参数-PHP和Angular.js

javascript - 无法弄清楚为什么我的网站占用了iPhone的一半屏幕