[JavaScript] toggle Opcje

[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??

Ten post edytował Fred1485 23.05.2015, 16:51:08

[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

Ten post edytował Fred1485 23.05.2015, 16:56:55

[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ś

zeby po kliknięciu zmienila sie np wartosx diva a po nastepnym z powrotem do pierwotnej

w takiej sytuacji:

[HTML] pobierz, plaintext 
var change='Y';
$("p").click(function(){
	var current=$(this).html();
	$(this).html(change);
	change=current;
});
[HTML] pobierz, plaintext 

Możesz również stworzyć własną funkcję jQuery:

[HTML] pobierz, plaintext 
jQuery.fn.extend({
    toggleHTML: function (s) {
        if(typeof change === 'undefined'){
         window.change=s;
        }
        var current=$(this).html();
        $(this).html(change);
        change=current;
        return true;
      }
});
[HTML] pobierz, plaintext 

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.

Ten post edytował session 23.05.2015, 17:37:12

[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:

[HTML] pobierz, plaintext 
<div class="content">
		<div class="main">
			<h1>Jednostronicowa lista FAQ</h1>
			<h2>Słyszałem, że JavaScript to fontanna młodości. Czy to prawda?</h2>
      <div class="answer">
        <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>
      </div>
      <h2>Czy język JavaScript rzeczywiście rozwiąże wszystkie moje problemy?</h2>
      <div class="answer">
        <p>Tak! Jest to najbardziej wszechstronny język programowania na świecie oraz ma funkcje doradztwa finansowego, reanimacji i opiekowania się zwierzętami domowymi.</p>
      </div>
      <h2>Czy jest coś, czego JavaScript <em>nie</em> potrafi?</h2>
      <div class="answer">
        <p>Nie! Potrafi nawet pisać stronnicze strony FAQ na swój temat. To naprawdę inteligentny język programowania!</p>
      </div>
		</div>
  </div>
[HTML] pobierz, plaintext 

i JS

[HTML] pobierz, plaintext 
$(document).ready(function() {
 $('.answer').hide();
 $('.main h2').toggle(
		function() {
	       $(this).next('.answer').slideDown();
		},
		function() {
		   $(this).next('.answer').fadeOut();
	  }
	); // koniec funkcji toggle
}); // koniec funkcji ready
[HTML] pobierz, plaintext 

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

Ten post edytował session 23.05.2015, 17:45:25

[Fred1485]

Tak robiąc offtopic kolega widzę z Tarnowa okolice Ciężkowic zna? (IMG:style_emoticons/default/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 (IMG:style_emoticons/default/wink.gif) Wiadomo że zna, po sąsiedku w końcu (IMG:style_emoticons/default/biggrin.gif) Ale obecnie w mieście królów (IMG:style_emoticons/default/Rkingsmiley.png) (IMG:style_emoticons/default/tongue.gif)

@Comandeer daję okejkę (IMG:style_emoticons/default/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.

Ten post edytował session 23.05.2015, 18:32:23

[Fred1485]

Dzięki koledzy juz wiem co i jak.