从 div 中获取标签值并将其显示在 html 中
Get a label value from a div and show it in html
您好,我想从 div 中获取标签值并将其显示在 html div 标签中。我正在构建一个带有播放列表的 html5 视频播放器,到目前为止,只要我点击缩略图,视频就会发生变化,并且每次都会向 div 添加不同的标签。我想在 html 中打印该标签,并在每次显示新视频时更改它。我已经尝试了一些东西,但无法让它工作。 jsfiddle https://jsfiddle.net/zo8tcuxs/1/
我的代码是:
<section id="video-container">
<video id="videoarea" controls="controls" poster="" src="" id="video1" ></video>
<div id="description" label="" type="text"> </div>
<ul id="playlist">
<li id="videoweek1" movieurl="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" label="This is video number 1 " type="video/mp4" moviesposter="http://html5videoformatconverter.com/data/images/screen.jpg">
<img src="http://html5videoformatconverter.com/data/images/screen.jpg" class="video-thumbnail">
</li>
<li id="videoweek2" movieurl="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" label="This is video number 2 " type="video/mp4" > <img src="http://html5videoformatconverter.com/data/images/screen.jpg" class="video-thumbnail"></li>
</ul>
</section>
$(function() {
$("#playlist li").on("click", function() {
$("#videoarea").attr({
"src": $(this).attr("movieurl"),
"poster": "",
"autoplay": "autoplay"
})
})
$("#playlist li").on("click", function() {
$("#description").attr({
"label": $(this).attr("label")
})
})
$("#videoarea").attr({
"src": $("#playlist li").eq(0).attr("movieurl"),
"poster": $("#playlist li").eq(0).attr("moviesposter")
})
})
标签没有值,它在 > html here </
(开始和结束标签)下有 html。试试这个:
$( function() {
var lblTxt = $('#label').html();
$('#div').html(lblTxt);
});
HTML
<label id="label">Hello</label>
<div id="div">
</div>
您需要设置目标 div
元素的 .text()
/.html()
。
$("#description").attr({
"label": $(this).attr("label")
}).text($(this).attr("label"))
您好,我想从 div 中获取标签值并将其显示在 html div 标签中。我正在构建一个带有播放列表的 html5 视频播放器,到目前为止,只要我点击缩略图,视频就会发生变化,并且每次都会向 div 添加不同的标签。我想在 html 中打印该标签,并在每次显示新视频时更改它。我已经尝试了一些东西,但无法让它工作。 jsfiddle https://jsfiddle.net/zo8tcuxs/1/
我的代码是:
<section id="video-container">
<video id="videoarea" controls="controls" poster="" src="" id="video1" ></video>
<div id="description" label="" type="text"> </div>
<ul id="playlist">
<li id="videoweek1" movieurl="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" label="This is video number 1 " type="video/mp4" moviesposter="http://html5videoformatconverter.com/data/images/screen.jpg">
<img src="http://html5videoformatconverter.com/data/images/screen.jpg" class="video-thumbnail">
</li>
<li id="videoweek2" movieurl="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" label="This is video number 2 " type="video/mp4" > <img src="http://html5videoformatconverter.com/data/images/screen.jpg" class="video-thumbnail"></li>
</ul>
</section>
$(function() {
$("#playlist li").on("click", function() {
$("#videoarea").attr({
"src": $(this).attr("movieurl"),
"poster": "",
"autoplay": "autoplay"
})
})
$("#playlist li").on("click", function() {
$("#description").attr({
"label": $(this).attr("label")
})
})
$("#videoarea").attr({
"src": $("#playlist li").eq(0).attr("movieurl"),
"poster": $("#playlist li").eq(0).attr("moviesposter")
})
})
标签没有值,它在 > html here </
(开始和结束标签)下有 html。试试这个:
$( function() {
var lblTxt = $('#label').html();
$('#div').html(lblTxt);
});
HTML
<label id="label">Hello</label>
<div id="div">
</div>
您需要设置目标 div
元素的 .text()
/.html()
。
$("#description").attr({
"label": $(this).attr("label")
}).text($(this).attr("label"))