jquery 函数不适用于新闻报道
我正在页面中的新闻部分使用新闻收报机,并且我想对这些新闻使用 Prettyphoto 插件,但是当 << 时,任何 jquery 函数都不起作用。力>项目改变其位置。
例如,当第一项成为最后一项时,所有 jquery 函数都不起作用
以下是 php 函数的代码
$(document).ready(function(){
var first = 0;
var speed = 1000;
var pause = 3500;
function removeFirst(){
first = $('ul#listticker li:first').html();
$('ul#listticker li:first')
.animate({opacity: 0}, speed)
.fadeOut('slow', function() {$(this).remove();});
addLast(first);
}
function addLast(first){
last = '<li style="display:none">'+first+'</li>';
$('ul#listticker').append(last)
$('ul#listticker li:last')
.animate({opacity: 1}, speed)
.fadeIn('slow')
}
interval = setInterval(removeFirst, pause);
//Codes above are for the news ticker
$(".news").click(function(e){
e.preventDefault(); //I assign news class to links if there is no image for the news on db but it doesn't even work
});
$("#newsdiv a[rel^='gallery']").prettyPhoto({
theme:'light_rounded'
});
});
和 HTML 结果
<ul id="listticker">
<li>
<img src="http://example.com/m.../k_haber.png"><a href="#" class="news">12.05.2011</a><span class="news-text">Some Title</span>
</li>
<li>
<img src="http://example.com/../some.png"><a href="http://example.com/../news/p_some.jpg" class="news-title" rel="gallery[dd0]"> 12.05.2011</a><span class="news-text">Some Other Title</span>
</li>
</ul>
知道可能导致此问题的原因或如何修复它吗?
编辑:
我认为问题是由于 jquery html 选择器而发生的。
I'm using a news ticker for a news section in a page and I want to use prettyphoto plugin with these news but any of jquery function doesn't work when < li > items change their position.
For example none of jquery functions doesn't work when first item becomes last
Here are the codes
$(document).ready(function(){
var first = 0;
var speed = 1000;
var pause = 3500;
function removeFirst(){
first = $('ul#listticker li:first').html();
$('ul#listticker li:first')
.animate({opacity: 0}, speed)
.fadeOut('slow', function() {$(this).remove();});
addLast(first);
}
function addLast(first){
last = '<li style="display:none">'+first+'</li>';
$('ul#listticker').append(last)
$('ul#listticker li:last')
.animate({opacity: 1}, speed)
.fadeIn('slow')
}
interval = setInterval(removeFirst, pause);
//Codes above are for the news ticker
$(".news").click(function(e){
e.preventDefault(); //I assign news class to links if there is no image for the news on db but it doesn't even work
});
$("#newsdiv a[rel^='gallery']").prettyPhoto({
theme:'light_rounded'
});
});
And the HTML Result of the php functions
<ul id="listticker">
<li>
<img src="http://example.com/m.../k_haber.png"><a href="#" class="news">12.05.2011</a><span class="news-text">Some Title</span>
</li>
<li>
<img src="http://example.com/../some.png"><a href="http://example.com/../news/p_some.jpg" class="news-title" rel="gallery[dd0]"> 12.05.2011</a><span class="news-text">Some Other Title</span>
</li>
</ul>
Any idea what might be causing this or how to fix it?
EDIT:
I assume the problem occurs because of the jquery html selector.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
在 dom 就绪事件之外获取变量和函数声明。 http://jsfiddle.net/jfahv/
Get your variables and function declarations outside the dom ready event. http://jsfiddle.net/jfahv/
jQuery 的“:first”选择器返回第一个匹配的元素,而不是第一个子元素。尝试使用 :first-child 代替。
jQuery's ":first" selector returns the first-matched element, not the first child element. Try using :first-child instead.
我意识到 Jquery 函数应该在将要使用的函数中声明,所以最后我找到了解决方案。
这是代码
I realized Jquery functions shuld be declared within the function which will be used so Finally I found the solution.
Here are the codes