Jquery -> fadeToggle() problem

01/21/2015 20:04 .Barone#1

Hallo, ich versuche momentan etwas zu coden, jedoch habe ich ein Problem mit fadetoggle();

PHP Code:


			
<div id ="Content">

  <div id ="GBox">

   <div id ="1VGBox"></div>

   <div id ="2VGBox"></div>

   <div id ="3VGBox"></div>

  <div id ="4VGBox"></div>

  </div>

  <div id="KBox">

    <div id ="1VKBox"></div>

    <div id ="1VKBox"></div>

    <div id ="1VKBox"></div>

    <div id ="1VKBox"></div>

  </div>

<buttonGbox></button>

<buttonKBox></button>

</div>

Das sind 2 Boxen die ich mit fadeToggle anzeigen lassen will.
Zuerst die Gbox;
$( "buttonGbox" ).click(function() {
$( "#Gbox" ).fadeToggle( "slow");
});
Dann die Kbox;
$( "buttonKbox" ).click(function() {
$( "#Kbox" ).fadeToggle( "slow");
});

Nun mein Problem: Wenn die Gbox UND Kbox eingefadet ist und ich die Gbox ausfaden will, geht die Kbox auch weg. Wenn beide eingefadet sind und ich die Kbox ausfaden lasse, geht nur die Kbox weg. Wie bekomme ich das hin, das wenn beide eingefadet sind, das ich nur die Gbox ausfaden lassen kann?

(Nur ein Beispiel-script)

Greets

01/21/2015 21:29 teto#2

Dein Button ist falsch, das Element hei�t Button und nicht ButtonGbox oder so, du kannst das Attribute "name" setzen um dann sp�ter eine auswahl zu treffen welcher Button geklickt wurde, es geht nat�rlich auch dar�ber den Buttons id�s zu geben.

Hier der HTML Code:

PHP Code:


			
<button name="gbox">GBox</button> 
<button name="kbox">KBox</button>

Hier JQuery:

PHP Code:


			
<script>
$("button").click(function () {
    if (this.name == "gbox")
    {
        $("#GBox").fadeToggle('slow');
    } else if(this.name == "kbox")
    {
        $("#KBox").fadeToggle('slow');
    }
});
</script>

Was macht der Code? Ich rufe mit JQuery alle HTML Elemente ab, welche vom Typ "Button" sind und weise bei allen Buttons dem Event "click" eine anonyme Funktion zu. In der Funktion frage ich mit "this", das HTML-Element ab, welches das Ereignis "OnClick" ausgel�st hat. Damit repr�sentiert "this" den "Button" der geklickt wurde und hat dadurch nat�rlich auch dessen Eigenschaften und da ich im HTML-Code das Attribut "name" gesetzt habe, greife ich darauf zu und entscheide mit einem vergleich des "name" Attributes des gedr�ckten Buttons was f�r eine Aktion ausgef�hrt werden soll.

01/22/2015 19:03 .Barone#3

hallo. erstmal, danke f�r deine Hilfe. Diese m�glichkeit ist nat�rlich sehr Zeitsparend ;)
Jedoch habe ich das Problem schon l�nger mit: <button name ="NAME"></button>. Dies funktioniert bei mir einfach nicht. Ich habe jetzt dein code copy pasted und es geht einfach nicht? bzw das einzige was ge�ndert wurde sind die Div's und button namen. Wenn ich auf die Buttons dr�cke, passiert nichts.

01/22/2015 20:24 teto#4

Dann poste mal bitte dein ganzes HTML Konstrukt, vielleicht steckt der Fehler da.

01/22/2015 20:28 .StarSplash#5

Sorry, habe gerade gesehen, dass du gar nicht die Buttons ausblenden willst sondern zugeh�rige Divs, ich nehme alles zur�ck!

So funktioniert das Script von teto aber problemlos, hast du die Schreibweise noch mal kontrolliert?

01/22/2015 20:52 .Barone#6

^Okay. Ich wei� nicht was ich falsch mache D: (Zugegeben: Ich bin noch anf�nger ;))

PHP Code:


			
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script type="text/javascript" src="Funktionen/Jsfunktionen.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" type = "text/css" href="style.css">
<script>
$("button").click(function () {
    if (this.name == "Btn1")
    {
        $("#GBox").fadeToggle('slow');
    } else if(this.id == "Btn2")
    {
        $("#KBox").fadeToggle('slow');
    }
});
</script>
</head>

<body>

<div id ="Content">
  <div id ="GBox">
   <div id ="1VGBox"></div>
   <div id ="2VGBox"></div>
   <div id ="3VGBox"></div>
  <div id ="4VGBox"></div>
  </div>
  <div id="KBox">
    <div id ="1VKBox"></div>
    <div id ="1VKBox"></div>
    <div id ="1VKBox"></div>
    <div id ="1VKBox"></div>
  </div>

</div> 
<div id ="Btn1"><button name="Btn1" class ="Btn1">Btn1<img src ="Btn1.png" width=48px; height=42px;></button></div>
<div id ="Btn2"><button id="Btn2" class ="Btn2">Btn2<img src ="btn2.png" width=48px; height=42px;></button></div>
</body>
</html>

Habs jetzt mit
(this.name== "Btn1")
und
(this.id== "Btn2")
versucht. Klappt trotzdem nicht.

01/22/2015 21:06 NotEnoughForYou#7

Du kannst entweder die .attr() Methode verwenden

[Only registered and activated users can see links. Click Here To Register...]

-->

Code:

$("button").click(function() {
    if($(this).attr('name') == "Btn1") {
      // do something
    }
});

oder direkt mit

Code:

$("button[name=\"Btn1\"]").click(function() {
    // do something
});

Siehe [Only registered and activated users can see links. Click Here To Register...]

Au�erdem sollte man, wenn man Jquery benutzt immer erst pr�fen ob die Seite richtig geladen wurde.

[Only registered and activated users can see links. Click Here To Register...]

-->

Code:

$(document).ready(function() {
// Jetzt erst dein Code f�r abfangen der Klicks etc.
});

01/22/2015 21:23 .Barone#8

PHP Code:


			
$(document).ready(function() {

 $("button").click(function () {

    if (this.name == "Btn1")

    {

        $("#Gbox").fadeToggle('slow');

    } else if(this.name == "Btn2")

    {

        $("#Kbox").fadeToggle('slow');

    }

});

});

Es klappt. Juhu, danke euch ;)
Jedoch immernoch mein Problem;-> Wenn die Gbox eingefadet ist und ich die Kbox einfade, kann ich die Kbox auch problemlos outfaden.
Ist die Gbox und die Kbox eingefadet und ich will die Gbox outfaden, fadet die Kbox auch aus.

01/22/2015 21:30 NotEnoughForYou#9

[Only registered and activated users can see links. Click Here To Register...]

Kannst es nat�rlich auch gerne in ein click Event packen und dann nach dem name Attribut abfragen, finde es so allerdings �bersichtlicher.

01/22/2015 21:36 .Barone#10

Liegt es an mir, oder passiert bei deinem Jsfiddle nichts?

Und ich kann nur die Kbox einfaden, wenn die Gbox eingefadet ist. Woah, komisch. Erstmal Schlafen und den Kopf frei bekommen >:

01/22/2015 21:44 NotEnoughForYou#11

Sry, habs geupdated, anscheinend ist die Version mit dem Name direkt im $() nicht von allen Browsern supported.

01/22/2015 22:34 teto#12

Ja, dass es bei dir nicht funktionierte lag wohl daran, dass das Dokument noch nicht fertig geladen war. Ich habe bei mir das Skript auch ans Ende des Bodys gepackt, da habe ich das Problem nicht.

Es gibt mehrere Wege, habe aber gesehen das du den Buttons ne Klasse gibst wodurch du diese auch direkt ansprechen k�nntest, z.B so

[Only registered and activated users can see links. Click Here To Register...]