Flexslider 无法使用 Jquery 处理自动生成的内容
Flexslider not working on auto generated content with Jquery
我有一个包含 post 内容的文本区域,我想用 Flexslider Jquery 插件制作一个滑块,当 post 有多个图像但不幸的是插件不工作。
HTML 代码
<textarea id='summary7731158085902631382' style='display:none;'>
<div dir="ltr" style="text-align: left;">
<a href="http://1.bp.blogspot.com/-tqkOgHfEp10/VKHDxv709UI/AAAAAAAABKo/IA6lz5cdGfE/s1600/unsplash_1.jpg">
<img src="http://1.bp.blogspot.com/-tqkOgHfEp10/VKHDxv709UI/AAAAAAAABKo/IA6lz5cdGfE/s1600/unsplash_1.jpg" />
</a>
<a href="http://1.bp.blogspot.com/-88jaynpnczQ/VKHDxr9NHXI/AAAAAAAABKs/PusKWOwGCYw/s1600/unsplash_2.jpg">
<img src="http://1.bp.blogspot.com/-88jaynpnczQ/VKHDxr9NHXI/AAAAAAAABKs/PusKWOwGCYw/s1600/unsplash_2.jpg" />
</a>
<a href="http://3.bp.blogspot.com/-JY0gtfw46YY/VKHDxgz63KI/AAAAAAAABK0/r0mvJkP_FE0/s1600/unsplash_3.jpg">
<img src="http://3.bp.blogspot.com/-JY0gtfw46YY/VKHDxgz63KI/AAAAAAAABK0/r0mvJkP_FE0/s1600/unsplash_3.jpg" /></a>
<br />
<p>Cras sit amet libero eros, in ultricies lorem. Nunc et odio neque. Maecenas vehicula interdum hendrerit. Integer hendrerit orci ullamcorper neque pellentesque feugiat. Aliquam magna metus, fringilla non ultrices id, fringilla eu erat. Phasellus lorem tortor, porttitor volutpat iaculis sed, condimentum ultricies massa. Curabitur ut malesuada elit. Nullam tortor mi, faucibus a laoreet a, ultricies ut est. Etiam erat urna, dapibus vitae sodales eu, sagittis ut nisl. Curabitur vitae tristique felis. Donec consectetur porttitor lectus ac pharetra. Mauris nulla nisi, congue quis eleifend at, dapibus eget augue. Curabitur nunc sem, feugiat sit amet facilisis quis, laoreet id mi.
</p>
</div>
</textarea>
<div id='content'></div>
Jquery代码
var sum = '',
content = $('#summary7731158085902631382').val(),
imgs = $(content).find('img');
if (imgs.length > 1) {
sum = '<div class="flexslider"><ul>';
for (var i = 0; i < imgs.length; i++) {
var img = imgs[i].src;
sum += '<li><a href="' + img + '"><img alt="" src="' + img + '"></a></li>';
}
sum += '</ul></div>';
}
$('#content').html(sum);
$('.flexslider').flexslider({
animation: "slide",
controlNav: false,
smoothHeight: true,
prevText: "",
nextText: ""
});
只需在 ul 标签中添加一个 class,即 "slide" : Fiddle
sum = '<div class="flexslider"><ul class="slides">';
我有一个包含 post 内容的文本区域,我想用 Flexslider Jquery 插件制作一个滑块,当 post 有多个图像但不幸的是插件不工作。
HTML 代码
<textarea id='summary7731158085902631382' style='display:none;'>
<div dir="ltr" style="text-align: left;">
<a href="http://1.bp.blogspot.com/-tqkOgHfEp10/VKHDxv709UI/AAAAAAAABKo/IA6lz5cdGfE/s1600/unsplash_1.jpg">
<img src="http://1.bp.blogspot.com/-tqkOgHfEp10/VKHDxv709UI/AAAAAAAABKo/IA6lz5cdGfE/s1600/unsplash_1.jpg" />
</a>
<a href="http://1.bp.blogspot.com/-88jaynpnczQ/VKHDxr9NHXI/AAAAAAAABKs/PusKWOwGCYw/s1600/unsplash_2.jpg">
<img src="http://1.bp.blogspot.com/-88jaynpnczQ/VKHDxr9NHXI/AAAAAAAABKs/PusKWOwGCYw/s1600/unsplash_2.jpg" />
</a>
<a href="http://3.bp.blogspot.com/-JY0gtfw46YY/VKHDxgz63KI/AAAAAAAABK0/r0mvJkP_FE0/s1600/unsplash_3.jpg">
<img src="http://3.bp.blogspot.com/-JY0gtfw46YY/VKHDxgz63KI/AAAAAAAABK0/r0mvJkP_FE0/s1600/unsplash_3.jpg" /></a>
<br />
<p>Cras sit amet libero eros, in ultricies lorem. Nunc et odio neque. Maecenas vehicula interdum hendrerit. Integer hendrerit orci ullamcorper neque pellentesque feugiat. Aliquam magna metus, fringilla non ultrices id, fringilla eu erat. Phasellus lorem tortor, porttitor volutpat iaculis sed, condimentum ultricies massa. Curabitur ut malesuada elit. Nullam tortor mi, faucibus a laoreet a, ultricies ut est. Etiam erat urna, dapibus vitae sodales eu, sagittis ut nisl. Curabitur vitae tristique felis. Donec consectetur porttitor lectus ac pharetra. Mauris nulla nisi, congue quis eleifend at, dapibus eget augue. Curabitur nunc sem, feugiat sit amet facilisis quis, laoreet id mi.
</p>
</div>
</textarea>
<div id='content'></div>
Jquery代码
var sum = '',
content = $('#summary7731158085902631382').val(),
imgs = $(content).find('img');
if (imgs.length > 1) {
sum = '<div class="flexslider"><ul>';
for (var i = 0; i < imgs.length; i++) {
var img = imgs[i].src;
sum += '<li><a href="' + img + '"><img alt="" src="' + img + '"></a></li>';
}
sum += '</ul></div>';
}
$('#content').html(sum);
$('.flexslider').flexslider({
animation: "slide",
controlNav: false,
smoothHeight: true,
prevText: "",
nextText: ""
});
只需在 ul 标签中添加一个 class,即 "slide" : Fiddle
sum = '<div class="flexslider"><ul class="slides">';