Le funzioni jQuery non funzionano con le notizie ticker
-
12-11-2019 - |
Domanda
Sto usando un ticker di notizie per una sezione di notizie in una pagina e voglio usare il plug -in PrettyPhoto con queste notizie, ma qualsiasi funzione jQuery non funziona quando <li> gli articoli cambiano la loro posizione.
Ad esempio, nessuna delle funzioni jQuery non funziona quando il primo elemento diventa l'ultimo
Ecco i codici
$(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'
});
});
E il risultato HTML delle funzioni PHP
<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>
Qualche idea su cosa potrebbe causare questo o come risolverlo?
MODIFICARE:
Presumo che il problema si verifichi a causa del selettore HTML jQuery.
Soluzione 3
Ho capito che le funzioni jQuery sono state dichiarate nell'ambito della funzione che verrà utilizzata, quindi alla fine ho trovato la soluzione.
Ecco i codici
$(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',function(){
$("a[rel^='gallery']").click(function() {
$.prettyPhoto.open($(this).attr("href"),"","");
return false;
});
});
$(".news").click(function(e){
e.preventDefault();
});
}
interval = setInterval(removeFirst, pause);
$("#newsdiv a[rel^='gallery']").prettyPhoto({
theme:'light_rounded'
});
});
Altri suggerimenti
Ottieni le tue variabili e le tue dichiarazioni di funzioni al di fuori dell'evento DOM Ready. http://jsfiddle.net/jfahv/
Il selettore ": First" di JQuery restituisce l'elemento di prima partita, non il primo elemento figlio. Prova a usare: Primo figlio invece.