Id mit JQuery auswerten

[Isometric]

Mit diesem Script kann ich einen Div-Container ein- und ausblenden.

            <script type="text/javascript">
                $(function () {
                $('a#tgglBox1').click (function (){
                  var class=$('#box1').hasClass('visible')?'hidden':'visible';
                  $.ajax({data:{display:class}});
                  $('#box1').toggleClass('visible');
                  $('#box1').toggleClass('hidden');
                  return false;
                });
              });
             
            </script>
            <style>
              .hidden {display:none;}
              .visible {display:block;}
            </style>
            <a id="tgglBox1" href="<?php echo $link; ?>">Klick 1</a>
            <div id="box1" class="<?php echo $display; ?>">Trinkt der Dichter wird er schlichter!</div>

Wie kann ich den Code gestalten, dass er variabler wird. Ich also mit

<a id="tgglBox2" href="<?php echo $link; ?>">Klick 2</a>

einen Div-Container mit der id=box2 ein- und ausblenden kann?

 

[hub]

AW: Id mit JQuery auswerten

Moin moin,
wie meinst du das? Also mit Link 1 Box 1, mit Link 2 Box 2 usw?

Gruß Ulli

 

[Duddle]

AW: Id mit JQuery auswerten

Da gibt es mehrere Ansätze: einer wäre, den Links eine bestimmte Klasse zu geben, damit du sie leichter identifizieren kannst. Danach bindest du die derzeitige click-Funktion an alle Links mit dieser Klasse.

In der click-Funktion ist dann der aktuelle Link $(this). Das direkt folgende div kannst du per next() erreichen. Dieses ist der variable Teil, der im Moment statisch #box1 ist.


Duddle

 

[hub]

AW: Id mit JQuery auswerten

Dein "var class= " kann in die Hose gehen, ich meine class als Variable zu nutzen.

Mal eine Möglichkeit:

<script type="text/javascript">
 $(function () {
  $('a.clickmich').click (function (){
   newId = $(this).prop('id').replace('tgglBox', '#box');
   $box = $(newId);
   var boxClass=$box.hasClass('visible')?'hidden':'visible';
   $.ajax({data:{display:boxClass}});
   $box.toggleClass('visible');
   $box.toggleClass('hidden');
   return false;
  });
 });
</script>
 
<a id="tgglBox1" class="clickmich visible" href="#">Klick 1</a>
<a id="tgglBox2" class="clickmich visible" href="#">Klick 2</a>

Entscheidend in diesem Beispiel sind die gleichen Ziffern in den Id's, der Rest der Id wird mit replace ausgetauscht ...

Gruß Ulli

 

[Isometric]

AW: Id mit JQuery auswerten

@Ulli: klappt super

kann man auch gleichzeitig die andere Box wieder schließen, wenn man eine eine neue öffnet?

Ich habe inzwischen noch ein anderes Beispiel gefunden, dass mir auch sehr gut gefällt.

 

[hub]

AW: Id mit JQuery auswerten

Jo, geht auch. Verpasse allen betroffenen Div's eine Klasse und mach sie erstmal zu, bevor dein Mechanismus läuft, der eine davon wieder aufmacht (auch hier gibts wieder viele Möglichkeiten) ...

<script>
$(function () {
  $('a.clickmich').click (function (){
   $('.mach-mich-zu').hide(); // oder switch deine css
   newId = $(this).prop('id').replace('tgglBox', '#box');
   ....
</script>
<div id="box1" class="mach-mich-zu"></div>
<div id="box2" class="mach-mich-zu"></div>
...

Gruß Ulli

 

[hub]

AW: Id mit JQuery auswerten

Sorry, nochmal ich.
Ich hab mir dein Link angeschaut. der wesentliche Unterschied zwischen beiden Varianten ist, bei meiner darfst du alles frei plazieren, bei dem anderen Vorschlag gibt es eine Abhängigkeit der Elemente, ist dafür aber kürzer, auch diese hat was. Kommt darauf an, was es am Ende werden soll .

Gruß Ulli

 

[Isometric]

AW: Id mit JQuery auswerten

Ich werde beide Varianten mal ausprobieren.

Im Prinzip soll es so werden, wie hier (Beispiel 2 umgebaut).

<div id="container">
 
    <h2>Hier steht die Überschrift <a href="#" id="button" class="closed">Details</a></h2>
    <p>Hier steht die detallierte Beschreibung. Dieser Text wird erst nach einem Klick auf das übergeordnete Elemente (h2) eingeblendet. Parallel wird auch die Klasse des Links gewechselt um den Pfeil zu drehen.</p>
    <h2>Hier steht die Überschrift <a href="#" id="button" class="closed">Details</a></h2>
    <p>Hier steht die detallierte Beschreibung. Dieser Text wird erst nach einem Klick auf das übergeordnete Elemente (h2) eingeblendet. Parallel wird auch die Klasse des Links gewechselt um den Pfeil zu drehen.</p>
    <h2>Hier steht die Überschrift <a href="#" id="button" class="closed">Details</a></h2>
    <p>Hier steht die detallierte Beschreibung. Dieser Text wird erst nach einem Klick auf das übergeordnete Elemente (h2) eingeblendet. Parallel wird auch die Klasse des Links gewechselt um den Pfeil zu drehen.</p>

</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> 
<script type="text/javascript">

$(document).ready(function(){
    $("h2").click(function(){ // trigger 
        $('p').hide();
        $('a').removeClass("open");
        $('a').addClass('closed');    
        $(this).prev().children("a").toggleClass("closed open"); // wechselt beim Klick auf "h2" die Klasse des enthaltenen a-Tags von "closed" zu "open". 
        $(this).next("p").slideToggle("fast"); // blendet beim Klick auf "h2" die nächste "p" ein. 
        $(this).children("a").toggleClass("closed open"); // wechselt beim Klick auf "h2" die Klasse des enthaltenen a-Tags von "closed" zu "open". 
    });
});

</script>

Es soll sich immer nur ein Textblock öffnen und die anderen sollen geschlossen sein.

Auf jeden Fall noch mal danke für Eure Hilfe, allein hätte ich mich da wieder Stunden im Kreis gedreht.

 

[hub]

AW: Id mit JQuery auswerten

Sieht doch schon gut aus. Wenn du jetzt noch alle div's noch vor oder nach deiner function schliesst, ist doch schon fast perfekt!

Viel Spaß noch
Ulli

 

[Isometric]

AW: Id mit JQuery auswerten

... ist doch schon fast perfekt!

Viel Spaß noch
Ulli

aber leider nur fast ....

        <script type="text/javascript">
                $(document).ready(function(){
                    $("h3").click(function(){ // trigger 
                        $('.leistungen div').hide();
                        $('h3 a').removeClass("open");
                        $('h3 a').addClass('closed');    
                        $(this).next("div").slideToggle("fast"); // blendet beim Klick auf "h3" die nächste "div" ein. 
                        $(this).children("h3 a").toggleClass("closed open"); // wechselt beim Klick auf "h3" die Klasse des enthaltenen a-Tags von "closed" zu "open". 
                    });
                });
        </script>

in dem Script ist noch folgender Fehler: ich setze die Klasse von allen "a" auf "closed". Richtig wäre aber alle "a" außer des aktuellen auf "closed" zu setzen, weil die Klasse des aktuellen "a" ja mit dem letzten Befehl hin und her gewechselt werden soll. Da sie aber durch den Anfang des Scripts auf "closed" gesetzt wurde, steht sie zum Schluss immer auf "open", wenn ich denselben Link 2x anklicke.

 

[hub]

AW: Id mit JQuery auswerten

Moin,
dafür haben die Entwickler von jQuery den not Operator gebastelt .

$('.alle').not('#ausser-mich').removeClass(...);
...

Also kein Ding, wenn der aktuelle Container als solcher gekennzeichnet oder identifizierbar ist. (So zB, wie in meinem vorherigen Beispiel ).

Gruß Ulli

 

[hub]

AW: Id mit JQuery auswerten

Hab noch n interessanten Link gefunden, könnte sein, das er dir das Leben leichter macht:


Gruß Ulli

 

[Isometric]

AW: Id mit JQuery auswerten

@hub: ich glaub ich hab es

ich habe einfach ein

.not(this).children("h3 a")

dort reingepackt, wo nichts an den Klassen verändert werden soll.

        <script type="text/javascript">
                $(document).ready(function(){
                    $("h3").click(function(){ // trigger 
                        $('.leistungen div').hide();
                        $('h3 a').not(this).children("h3 a").removeClass("open");
                        $('h3 a').not(this).children("h3 a").addClass('closed');    
                        $(this).next("div").slideToggle("fast"); // blendet beim Klick auf "h3" die nächste "div" ein. 
                        $(this).children("h3 a").toggleClass("closed open"); // wechselt beim Klick auf "h3" die Klasse des enthaltenen a-Tags von "closed" zu "open". 
                    });
                });
        </script>

und danke für den Link, mit solchen Beispielen tue ich mir immer leichter.

und übrigens; deine Variablennamen gefallen mir ausnehemnd gut :lol:

 

[cebito]

AW: Id mit JQuery auswerten

Vielleicht noch ein Tipp, man kann das auch kombinieren, so daß es noch leserlicher wird:

$('h3 a').not(this).children("h3 a").removeClass("open").addClass('closed');