Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] toggle
Forum PHP.pl > Forum > Przedszkole
Fred1485
Czytając różne poradniki napotkałem fajna funkcje toggle ale niestety jest ona zdeprecjonowana i tutaj pytanie czy jest cos podobnego w jezyku jquery zeby po kliknięciu zmienila sie np wartosx diva a po nastepnym z powrotem do pierwotnej i tak w kolo?
rad11
Nie ma jedyne dwie opcje to toggle i toggleClass ale w czym masz problem aby do Twojego problemu uzyc zyklego toggle?
Fred1485
Gdzyz zostala zdeprecjonowana i nie działa poprawnie z najnowszą wersją jquery chyba ze ja coś źle robie??
rad11
Pokaz co robisz i jak
Fred1485
Chce zrobić skrypcik ze jak klikne na jeden div to drugi div się pojawi a jak znowu klikne to zniknie. Zaraz wrzucę kod jak będę w domu
Comandeer
No toć $.fn.toggle:
Kod
$('.jeden').on('click', function()
{
    $('.dwa').toggle();
});
rad11
https://jsfiddle.net/eootgtmf/
Fred1485
No dobrze a chcąc dodać np fadeIn i fadeOut do tego czarnego kwadracika?
Comandeer
http://api.jquery.com/fadeToggle/
session
Początkowo pisałeś
Cytat
zeby po kliknięciu zmienila sie np wartosx diva a po nastepnym z powrotem do pierwotnej
w takiej sytuacji:
  1. var change='Y';
  2. $("p").click(function(){
  3. var current=$(this).html();
  4. $(this).html(change);
  5. change=current;
  6. });


Możesz również stworzyć własną funkcję jQuery:
  1. jQuery.fn.extend({
  2. toggleHTML: function (s) {
  3. if(typeof change === 'undefined'){
  4. window.change=s;
  5. }
  6. var current=$(this).html();
  7. $(this).html(change);
  8. change=current;
  9. return true;
  10. }
  11. });

Później stosujesz ją sobie jak normalne toggle. Przykład.

Oczywiście nic nie stoi na przezkodzie, żeby zmienne przechowywały nie tyle zawartość jakiegoś elementu, a wartość jakiegoś atrybutu. Zamiast .html() możesz użyć dowolnej innej funkcji, której potrzebujesz.

I wracając funkcja toggle w postaci
Kod
.toggle( handler, handler [, handler ] )
została zdeprecojnowana, natomiast wspomniana funkcja toggle
Kod
.toggle( [duration ] [, complete ] )
jest obecnie jak najbardziej ok, z tym, że odpowiada jedynie za pokazanie/ukrycie elementu. W pozostałych kwestiach odpowiedź już znasz.
martex
.fadeToggle();
Comandeer
@session a po co Ci to window.change? Lepiej wykorzystać lokalny scope
Fred1485
Bo właśnie zastanawiam się czemu nie działało, analizując ten przykład:

  1. <div class="content">
  2. <div class="main">
  3. <h1>Jednostronicowa lista FAQ</h1>
  4. <h2>Słyszałem, że JavaScript to fontanna młodości. Czy to prawda?</h2>
  5. <div class="answer">
  6. <p>Tak, naprawdę! Badania wykazały, ża nauka języka JavaScript ożywia umysł i wydłuża oczekiwany czas życia o kilkaset lat. (Uwaga: część naukowców nie zgadza się z tymi twierdzeniami).</p>
  7. </div>
  8. <h2>Czy język JavaScript rzeczywiście rozwiąże wszystkie moje problemy?</h2>
  9. <div class="answer">
  10. <p>Tak! Jest to najbardziej wszechstronny język programowania na świecie oraz ma funkcje doradztwa finansowego, reanimacji i opiekowania się zwierzętami domowymi.</p>
  11. </div>
  12. <h2>Czy jest coś, czego JavaScript <em>nie</em> potrafi?</h2>
  13. <div class="answer">
  14. <p>Nie! Potrafi nawet pisać stronnicze strony FAQ na swój temat. To naprawdę inteligentny język programowania!</p>
  15. </div>
  16. </div>
  17. </div>


i JS

  1. $(document).ready(function() {
  2. $('.answer').hide();
  3. $('.main h2').toggle(
  4. function() {
  5. $(this).next('.answer').slideDown();
  6. },
  7. function() {
  8. $(this).next('.answer').fadeOut();
  9. }
  10. ); // koniec funkcji toggle
  11. }); // koniec funkcji ready


Tutaj to działa pięknie ale na starszej wersji jquery na nowszej nie będzie poprawnie działać.
To dlatego że nowsze jQuery nie wspiera tego?

session
Tak jak pisałem najnowsze jQuery nie wspiera tego w tej postaci w jakiej jest to użyte w tym przykładzie.

@Comandeer próbowałem w local scope, ale nie chciało przechowywać między kolejnymi wywołaniami funkcji niestety, przyznam, że nie siedziałem nad tym dłużej
Fred1485
Tak robiąc offtopic kolega widzę z Tarnowa okolice Ciężkowic zna? biggrin.gif
Comandeer
@session tak po jQuerowemu:
Kod
jQuery.fn.extend({
    toggleHTML: function(s)
    {
        var $this = $(this);

        if(typeof $this.data('change') === 'undefined')
            this.data('change', s);

        var change = $this.data('change')
        ,current=$this.html();

        $this.html(change);

        $this.data('change', current);

        return this;
    }
});
session
@Fred1485 kontynuując offtop wink.gif Wiadomo że zna, po sąsiedku w końcu biggrin.gif Ale obecnie w mieście królów Rkingsmiley.png tongue.gif

@Comandeer daję okejkę specool.gif

A żeby na offtopie nie skończyć można do tej funkcji dorzucić console.log(), aby w konsoli widzieć co się w funkcji dzieje.
Fred1485
Dzięki koledzy juz wiem co i jak.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.