J'aimerais pouvoir cliquer sur un div et avoir un cycle de cycle via les effectifs à l'intérieur de la DIV. Je peux le faire travailler avec le code ci-dessous, mais j'aimerais y avoir plusieurs d'entre eux sur une page ensemble qui fonctionnent indépendamment (ils ne font donc que faire échec à leurs propres enfants). Le clic doit faire avancer les deux diaporamas de texte, mais avec des contenus indépendants.
p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="timezones"> <span>9am PDT</span> <span>10am MDT</span> <span>11am CDT</span> <span>12pm EST</span> </div> <div class="timezones"> <span>5pm PDT</span> <span>6pm MDT</span> <span>7pm CDT</span> <span>8pm EST</span> </div>
4 Réponses :
Essayez quelque chose comme ci-dessous:
$(document).ready(function() {
var divs = $('.timezones span');
i = 0;
function cycle(selectedDiv) {
selectedDiv.fadeOut(0).eq(i).fadeIn(0);
i = ++i % selectedDiv.length;
};
$('.timezones').click(function() {
cycle( $(this).children('span'));
})
});
L'utilisation d'un global i pour toutes les fuseaux tariates va être problématique. Note "alors ils ne font que faire échec à leurs propres enfants" en op
Essayez ceci bonne chance!
Plutôt que d'avoir à stocker des variables d'index, je cherche généralement l'actif dans le conteneur parent actuel et utilisez quelque chose comme: p> p> suivant () code>. Lorsque l'actif n'existe pas, vous n'existez pas, vous revenez au premier () code>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="timezones">
<span>9am PDT</span>
<span>10am MDT</span>
<span>11am CDT</span>
<span>12pm EST</span>
</div>
<div class="timezones">
<span>5pm PDT</span>
<span>6pm MDT</span>
<span>7pm CDT</span>
<span>8pm EST</span>
</div>
C'est génial, mais est-il possible pour l'événement de clic pour cycler les deux divs? Donc, si vous avancez dans un div, vous avancez également dans un autre. Merci!
Oh, vous voulez que toutes les instances .Ijiez-vous avancer, quelle que soit la cliquée? Ce n'était pas tout à fait clair. Si tel est le cas, pourquoi pas seulement avoir un seul bouton "avance tous" plutôt que de cliquer n'importe où?
Oui, tout devrait avancer. Une avance tout bouton fonctionnerait aussi.
Ensuite, vous devez refuser d'utiliser $ ('. Timezones'). Chaque ... et utilisez le code que j'ai à l'intérieur de la fonction de cycle pour chacune des instances. Dans chaque callbck Ceci sera l'élément TimeZones d'itération actuel et tout ce code à l'intérieur de la fonction Cycle doit fonctionner à l'intérieur de chaque rappel.
Je l'ai eu en fonctionnement avec ce code: