Bonjour, j'ai une playlist sur mon site web qui a cette structure :

<ul class="playlist">
    <li><a href="/tracks/149426934" id="link-track">Je fait un teste 2</a>
        <div>
            J'ai d'autre contenue
        </div>
    </li>
    <li><a href="/tracks/144404602" id="link-track">Tune</a>
         <div>
            J'ai d'autre contenue
        </div>
    </li>
</ul>

Avec ma fonction qui permet de détecter le clique et de jouer une tune.

var $pl = $('ul.playlist');
var $alink = $('a#link-track');
var $list = ('ul.playlist li'); 
$($alink).click(function(event){
    var track_id = $(this).attr('href');
    $(this).append();
    // Call Api SoundCloud (stram)
    SC.stream(track_id,function(sound){
        sound.play({
            onfinish : function(){
            // Je veux jouer la prochaine tune. 
            }
        });
        });
    event.preventDefault();
});

Si je suis sur la dernière éléments <li> de ma playlist tu retourne au début.

J'ai essayer avec jQuery avec la fonction next(); et la fonction classique de nextSiblings() en javascript je ne suis pas arrivée à la solution.

Merci de votre aide en avance!

10 réponses


Vallyan
Réponse acceptée

Nan, attends, j'ai mieux:

L'un des problèmes c'est que tu cliques sur un <a>, mais ce que tu veux c'est passer au <a> du <li> suivant.

Je t'ai fais une fonction js:

function clickNextTune( liTuneClass, $currentLi ){
  if( $currentLi.index() < $("."+liTuneClass).length-1 )
    $currentLi.next().children('a').trigger('click');
  else
    $("."+liTuneClass).eq(0).children('a').trigger('click');
}

Si tu lui donne le <li> parent du <a> qui correspond a la tune que tu es en train de jouer, et la classe des <li> (tu n'as pas mis de classe a tes <li>, je l'ai rajouté), il te trouve le prochain <a> et simule un click dessus.
Donc:

1/ Tu cliques sur un <a>
2/ Ca joue ta musique grace a ton API
3/ Dans la fonction de callback de ton API, tu lui mets la fonction que je viens de te faire, en lui donnant comme paramètre le <li> parent du <a> sur lequel tu as cliqué au début: donc c'est $(this).parent('li'), aini que la class de tes <li>

Le codepen suivant: http://codepen.io/fvilliers/pen/pAyHE te montre le principe. Au lieu de jouer de la musique, mes <li> deviennent rouge, et après 2 secondes, passe a la tune suivante. Click sur n'importe quel lien, tu verras que toutes les deux secondes la track suivant s'allume en rouge, et revient au début lorsqu'il est a la fin.

Si je l'incorpore dans ton code, ca donnera un truc du genre (j'ai annoté en majuscules):

var $pl = $('ul.playlist');
var $alink = $('a#link-track');
var $list = ('ul.playlist li'); 
$($alink).click(function(event){
    // JE STOCK LE LIEN CLIQUE DANS UNE VARIABLE
    $clicked = $(this);
    var track_id = $(this).attr('href');
    $(this).append(); // JE NE SAIS PAS A QUOI SERT CE APPEND ???

    // Call Api SoundCloud (stram)
    SC.stream(track_id,function(sound){
        sound.play({
            onfinish : function(){
            // Je veux jouer la prochaine tune. 
            // AVEC MA FONCTION
            clickNextTune( li-tune, $clicked.parent('li') );
            }
        });
        });
    event.preventDefault(); // LE PREVENT DEFAULT DEVRAIT ETRE MIT EN TOUT PREMIER APRES LE .CLICK()
});
lakamark
Auteur
Réponse acceptée

Merci c'est ça!

c'est quoi que tu arrives pas a faire, passer du dernier li au premier, ou passer de n'importe quel li au suivant ?

lakamark
Auteur

Ce que je n'arrive pas à quand une foi que la tune est terminé tu va au prochain lien a#link-track dans la list.
Si l'utilisateur clique sur le dernier lien il faut que le prochain li soi le premier li.

Je t'ai fais un codepen. Ici c'est un click qui induit la transition d'un <li> au suivant, et qui retourne au premier lorsqu'il atteind le dernier <li>, mais tu peux déclencher l'action par d'autres moyens (callback de ta fontion qui joue la tune par exemple).
Tu peux aussi remplacer les <li> par ce que tu veux (<a> ou autre ...).

http://codepen.io/anon/pen/cKoln

Le js:

$("#click").click(function(){
    console.log( $("li.current").index() );
    $current = $("li.current");
    if( $("li.current").index() < $("li.tune").length-1 ){
        $current.removeClass('current').next().addClass('current');
    } else {
        $current.removeClass('current');
        $("li.tune").eq(0).addClass('current');
    }
});
lakamark
Auteur

Est-ce que je peut mettre des buttons à chaque li?

<ul class="playlist">
    <li><a href="/tracks/149426934" id="link-track"></a>
        <button id="play">Play</button>
        <div>
            J'ai d'autre contenue
        </div>
    </li>
    <li><a href="/tracks/144404602" id="link-track"></a>
        <button id="play">Play</button>
         <div>
            J'ai d'autre contenue
        </div>
    </li>
</ul>

Bah oui tu peux mettre des boutons dans tes li .... ???? ....

Je pige pas pourquoi tu demandes ....

lakamark
Auteur

Je me suis perdu dans ton exemple...

lakamark
Auteur

Je pense que ta deuxième option celle de passé " passer de n'importe quel li au suivant ?" règle mon problème.

Désolé.