Jquery -> fadeToggle() problem

.Barone · 01/21/2015, 20:04

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

teto · 01/21/2015, 21:29

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.

.Barone · 01/22/2015, 19:03

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.

teto · 01/22/2015, 20:24

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

.StarSplash · 01/22/2015, 20:28

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?

.Barone · 01/22/2015, 20:52

^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.

NotEnoughForYou · 01/22/2015, 21:06

Du kannst entweder die .attr() Methode verwenden

-->

Code:

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

oder direkt mit

Code:

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

Siehe

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

-->

Code:

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

.Barone · 01/22/2015, 21:23

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.

NotEnoughForYou · 01/22/2015, 21:30

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

.Barone · 01/22/2015, 21:36

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

NotEnoughForYou · 01/22/2015, 21:44

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

teto · 01/22/2015, 22:34

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