如何使用 jquery 找到最近的下一个 img 标签
how to find closest next img tag with jquery
我在 foreach 循环中有几个这样的 html 块:
<label class="">Replace video:</label>
<input type="file" name="replaced_main_video" class="input-video-preview" />
<!-- replaced main video -->
<video class="video" controls>
<source type="video/mp4">
</video>
<canvas></canvas>
<label class="">Preview replaced video:</label><br />
<img class="video-preview" width="100" src="#" />
要显示所选上传视频的预览,请使用此 js 代码:
$(function() {
var video = $('.video');
var thumbnail = $('canvas');
var input_video_preview = $('.input-video-preview');
var ctx = thumbnail.get(0).getContext("2d");
var duration = 0;
var img = $('.video-preview');
input_video_preview.on('change', function(e) {
var file = e.target.files[0];
// Set video source
video.find('source').attr('src', URL.createObjectURL(file));
// Load the video
video.get(0).load();
// Load metadata of the video to get video duration and dimensions
video.on('loadedmetadata', function(e) {
duration = video.get(0).duration;
// Set canvas dimensions same as video dimensions
thumbnail[0].width = video[0].videoWidth;
thumbnail[0].height = video[0].videoHeight;
// Set video current time to get some random image
video[0].currentTime = Math.ceil(duration / 2);
// Draw the base-64 encoded image data when the time updates
video.one("timeupdate", function() {
ctx.drawImage(video[0], 0, 0, video[0].videoWidth, video[0].videoHeight);
//$('.video-preview').attr("src", thumbnail[0].toDataURL());// THIS WORKS, but all imgs get src
$('.input-video-preview').next('.video-preview').attr("src", thumbnail[0].toDataURL()); // bind to the next img with class 'video-preview'
});
});
});
});
这很好用,但是因为 html 块由 foreach 重复,所以每个 img
都会获取源代码。我只想要 input type="file"
之后的下一个 img
标签
我试图通过函数中的下面这一行来实现这一点:
$('.input-video-preview').next('.video-preview').attr("src", thumbnail[0].toDataURL()); // get input with class 'input-video-preview', take the next img with class '.video-preview' and bind it to the `src` attribute
但不幸的是,这不起作用....
我怎样才能做到这一点?
为了引用具体的input
,通常我们在函数内部使用$(this)
:
$(this).next('.video-preview')
而不是
$('.input-video-preview').next('.video-preview')
编辑
由于您有许多对 on()
的嵌套调用,命令 $(this)
可能会更改上下文而不是针对 <input>
组件。所以你可能需要做这样的事情:
input_video_preview.on('change', function(e) {
var selectedInput = $(this);
//...
//...
selectedInput.nextAll('.video-preview').eq( 0 ).attr("src", thumbnail[0].toDataURL());
});
编辑 2
除了您问题的主题之外,您的代码还有其他方面可能会阻止它工作。
您不应该事先定义 video
、thumbnail
和 img
变量。此变量取决于所选择的输入。
所以你也应该使用 nextAll()
在 on()
中定义,就像这样:
$(function() {
var input_video_preview = $('.input-video-preview');
var duration = 0;
input_video_preview.on('change', function(e) {
var selectedInput = $(this);
var video = selectedInput.nextAll('.video');
var thumbnail = selectedInput.nextAll('canvas');
var ctx = thumbnail.get(0).getContext("2d");
var img = selectedInput.nextAll('.video-preview');
var file = e.target.files[0];
//...
});
})
我在 foreach 循环中有几个这样的 html 块:
<label class="">Replace video:</label>
<input type="file" name="replaced_main_video" class="input-video-preview" />
<!-- replaced main video -->
<video class="video" controls>
<source type="video/mp4">
</video>
<canvas></canvas>
<label class="">Preview replaced video:</label><br />
<img class="video-preview" width="100" src="#" />
要显示所选上传视频的预览,请使用此 js 代码:
$(function() {
var video = $('.video');
var thumbnail = $('canvas');
var input_video_preview = $('.input-video-preview');
var ctx = thumbnail.get(0).getContext("2d");
var duration = 0;
var img = $('.video-preview');
input_video_preview.on('change', function(e) {
var file = e.target.files[0];
// Set video source
video.find('source').attr('src', URL.createObjectURL(file));
// Load the video
video.get(0).load();
// Load metadata of the video to get video duration and dimensions
video.on('loadedmetadata', function(e) {
duration = video.get(0).duration;
// Set canvas dimensions same as video dimensions
thumbnail[0].width = video[0].videoWidth;
thumbnail[0].height = video[0].videoHeight;
// Set video current time to get some random image
video[0].currentTime = Math.ceil(duration / 2);
// Draw the base-64 encoded image data when the time updates
video.one("timeupdate", function() {
ctx.drawImage(video[0], 0, 0, video[0].videoWidth, video[0].videoHeight);
//$('.video-preview').attr("src", thumbnail[0].toDataURL());// THIS WORKS, but all imgs get src
$('.input-video-preview').next('.video-preview').attr("src", thumbnail[0].toDataURL()); // bind to the next img with class 'video-preview'
});
});
});
});
这很好用,但是因为 html 块由 foreach 重复,所以每个 img
都会获取源代码。我只想要 input type="file"
img
标签
我试图通过函数中的下面这一行来实现这一点:
$('.input-video-preview').next('.video-preview').attr("src", thumbnail[0].toDataURL()); // get input with class 'input-video-preview', take the next img with class '.video-preview' and bind it to the `src` attribute
但不幸的是,这不起作用.... 我怎样才能做到这一点?
为了引用具体的input
,通常我们在函数内部使用$(this)
:
$(this).next('.video-preview')
而不是
$('.input-video-preview').next('.video-preview')
编辑
由于您有许多对 on()
的嵌套调用,命令 $(this)
可能会更改上下文而不是针对 <input>
组件。所以你可能需要做这样的事情:
input_video_preview.on('change', function(e) {
var selectedInput = $(this);
//...
//...
selectedInput.nextAll('.video-preview').eq( 0 ).attr("src", thumbnail[0].toDataURL());
});
编辑 2
除了您问题的主题之外,您的代码还有其他方面可能会阻止它工作。
您不应该事先定义 video
、thumbnail
和 img
变量。此变量取决于所选择的输入。
所以你也应该使用 nextAll()
在 on()
中定义,就像这样:
$(function() {
var input_video_preview = $('.input-video-preview');
var duration = 0;
input_video_preview.on('change', function(e) {
var selectedInput = $(this);
var video = selectedInput.nextAll('.video');
var thumbnail = selectedInput.nextAll('canvas');
var ctx = thumbnail.get(0).getContext("2d");
var img = selectedInput.nextAll('.video-preview');
var file = e.target.files[0];
//...
});
})