Inline Javascript provoquant l'arrêt du plugin jQuery Cycle

Question

Je suis nouveau sur jquery et javascript et je suis confronté à un problème que j'espère que quelqu'un ici sera capable de résoudre. J'ai installé un plugin jquery Cycle pour afficher du contenu dans un div. Maintenant, j'ai aussi certains liens charger un contenu différent dans un autre div. Au chargement, le cycle fonctionne bien, mais quand je clique sur l'un des liens et charge le contenu dans l'autre div, ce cycle cesse de fonctionner. Veuillez noter que j'utilise un javascript en ligne dans les hrefs des liens. Et c'est créer le conflit. Mon code:

<script type="text/javascript">  
    $(document).ready(function() { 
    $(".paras").cycle({ 
     fx: 'fade', 
     speed: 200, 
     timeout: 1000, 
     next: '.tnext', 
     prev: '.tprev', 
     cleartype: '1' 
     }) 

     content(1); /* To load content 1 on page load */ 

    }); 

    function content(i){ 
     if (i == 1) {/* Code to load content in BIG DIV from external HTML */} 
     if (i == 2) {/* Code to load content in BIG DIV from external HTML */} 
     if (i == 3) {/* Code to load content in BIG DIV from external HTML */} 
    } 
</script> 

<ul> 
    <li><a class="home" href="javascript:content(1)">Home</a></li> 
    <li><a class="work" href="javascript:content(2)">Work</a></li> 
    <li><a class="about" href="javascript:content(3)">About</a></li> 
</ul> 

<div> 
/* This is the big div */ 
</div> 

<div class="paras"> 
/* This is the small div. Content loaded using jquery cycle. Stops cycling when content loaded in BIG DIV */ 
</div> 

Quelqu'un peut-il suggérer comment garder le cycle de travail tout en gardant le javascript inline intact? Ou suggérez-vous quelque chose de mieux?

Answer 1

Je ne sais pas, sans en savoir plus sur le plugin Cycle, mais essayez de changer les trois HREF à « # », puis déplacez l'action en ligne à un onclick, comme ceci:

<script type="text/javascript"> 

$(document).ready(function() { 
    $(".paras").cycle({ 
     fx: 'fade', 
     speed: 200, 
     timeout: 1000, 
     next: '.tnext', 
     prev: '.tprev', 
     cleartype: '1' 
    }); 

    content(1); /* To load content 1 on page load */ 

}); 

function content(i){ 
    if (i == 1) {/* Code to load content in BIG DIV from external HTML */} 
    if (i == 2) {/* Code to load content in BIG DIV from external HTML */} 
    if (i == 3) {/* Code to load content in BIG DIV from external HTML */} 
    return false; 
} 
</script> 

<ul> 
    <li><a class="home" href="#" onclick="return content(1);">Home</a></li> 
    <li><a class="work" href="#" onclick="return content(2);">Work</a></li> 
    <li><a class="about" href="#" onclick="return content(3);">About</a></li> 
</ul> 

<div> 
    /* This is the big div */ 
</div> 

<div class="paras"> 
    /* This is the small div. Content loaded using jquery cycle. Stops cycling when content loaded in BIG DIV */ 
</div> 

Encore mieux serait de tuer les onclicks et appliquent l'écouteur dynamiquement; vous avez déjà des noms de classe uniques, vous n'avez donc pas besoin des 1,2,3. Même si ce n'est pas pertinent à votre problème, voici comment le faire de cette façon:

<script type="text/javascript"> 

$(document).ready(function() { 
    $("#paras").cycle({ 
     fx: 'fade', 
     speed: 200, 
     timeout: 1000, 
     next: '.tnext', 
     prev: '.tprev', 
     cleartype: '1' 
    }); 

    content("home"); /* To load content 1 on page load */ 


    $('#contentlist li').click(function() { 
     content(this.attr('id')); 
    }); 

}); 


function content(elId){ 

    if (elId == 'home') {/* Code to load content in BIG DIV from external HTML */} 
    else if (elId == 'work') {/* Code to load content in BIG DIV from external HTML */} 
    else if (elId == 'about') {/* Code to load content in BIG DIV from external HTML */} 
    return false; 
} 
</script> 

<ul id="contentlist"> 
    <li><a id="home" href="#">Home</a></li> 
    <li><a id="work" href="#">Work</a></li> 
    <li><a id="about" href="#">About</a></li> 
</ul> 

<div> 
    /* This is the big div */ 
</div> 

<div id="paras"> 
    /* This is the small div. Content loaded using jquery cycle. Stops cycling when content loaded in BIG DIV */ 
</div> 

Je également mis à jour les noms de classe à ID. Ce n'est pas nécessaire, mais vous utilisez effectivement des classes comme identifiants uniques de toute façon, et c'est à cela que sert un identifiant; il est également plus efficace de choisir de l'utiliser.

Enfin, je vous suggère également de remplacer le "#" par des URL pour les visiteurs non-JavaScript (en particulier les moteurs de recherche).