selektoren problem

[arees]

hallo,
ich möchte gerne wenn ich auf ein element mit einer class klicke das dann ein anderes element mit einem anderen klassenamen ein bestimmtes verhalten macht. Nur möchte ich nicht das alle anderen mit dem klassennamen den ich angesprochen habe auch das verhalten machen. Also nur eine klasse von mehreren.

Mit (this) geht es nicht weil dann ja nur das element angesprochen wird was ich gerade angeklickt habe.

beispiel:

$(document).ready(function(){
	
	var speed = 250;
	
	$('.gepunktet').click(function(){

	$('.link_content').animate({height: "100px"},speed);
	
	});
	
});

ich möchte wenn ich auf gepunktet(ein text) klicke das nur eine klasse aufgerufen wird. Aber ich weiß von vornerein nicht welche der besucher angklickt. Das ganze soll son ausklappmenü werden wo man auf eine überschrift klickt und dann unter der überschrift ein weiterer text ausgefahren wird.

hoffe ihr versteht was ich meine und könnt mir helfen

lg arees

[Martin Kraft]

Poste mal ein zugehöriges HTML-Snipplet, dann steigen die Chancen zu verstehen, was Du vorhast

[arees]

<h2 class="gepunktet">Fußball</h2>
<div class="link_content">

          <a href="http://www.bvb.de" target="_blank">Borussia Dortmund</a>
 <div class="link_divider"></div>         
 		  <a href="http://www.schwatzgelb.de" target="_blank">BvB Fanzine</a>
 <div class="link_divider"></div>
          <a href="http://www.schalke04.de" target="_blank">Schalke 04</a>
 <div class="link_divider"></div>
          <a href="http://www.bundesliga.de" target="_blank">Bundesliga</a>
 <div class="link_divider"></div>          
<a href="http://www.hobbyteams.de" target="_blank">Hobbyfussballportal</a>
 <div class="link_divider"></div>                  
<a href="http://www.dfb.de" target="_blank">DFB - Deutscher Fu&szlig;ballbund</a>
</div>

das soll halt wenn ich auf "Fußball" klicke der ganze content mit den links von oben nach unten aufklappen.

nur hab ich halt mehrere von diesen überschriften + content und ich will nicht das wenn man auf "Fußball" klickt die anderen contents mit den links aufklappen nur halt die die mit dem fußball

[Martin Kraft]

Das wirst Du mit dieser Struktur wohl nicht hinbekommen. Die beiden Tags haben ja z.Z. keinerlei hierarchische Beziehung, sondern liegen auf derselben Ebene.

Du solltest also zumindest ummantelnde <div>s verwenden, die jeweils ein Paar enthalten.

[arees]

kannste mir ein beispiel geben?

[speedjunkie]

Du kannst auch mehre Klassennamen und id’s vergeben so das wieder eine eindeutige Identität entsteht. Für ein slide/flyout Menü muss man nicht unbedingt mit JS rangehen. Mit CSS lässt sich eine Menge machen.

[arees]

mh, ich habe es leider immer noch nicht hingekriegt

könnt ihr mir nicht einfach son beispiel irgwie zeigen?

ich will einfach nur den div ausklappen wo die überschrift drüber ist.

genau wie hier im forum. Wenn man an den Pfeilen rechts an den überschriften der unterforen drückt klappt sich das ja ein. Genau sowas möchte machen. Nur will ich nicht für jedes element eine neue function schreiben sondern nur eine die für alle "unterforen" einen function block ausführt.

hoffe ihr wisst jetzt was ich meine

grüße arees

[speedjunkie]

Also in Deinem Beispiel nur damit es funktioniert musst Du die CSS Eigenschaften setzen.

.link_content {
	position: absolute;
	height: 0;
	overflow: hidden;
}

Dann vergibst Du dem <div> Element noch eine id="soccer", damit nicht alle mit der class .link_content aufpoppen.

<div class="link_content" id="soccer">

Und kannst dann in jQuery auch Werte abfragen. Hier als Beispiel den Text.

$(document).ready(function()
{
		var speed = 250;
				
		$('.gepunktet').bind("click", clickHandler);
				
		function clickHandler()
		{
			console.log($(this).text());
					
			switch($(this).text())
			{
				case "Fußball":
							
				$('#soccer').animate({height: "100px"}, speed);
							
				break;
			}
		}			
});

Martin hat es bereits angedeutet, das Du Dir über den Outline Algorithmus Gedanken machen musst, wenn sich das ein oder andere Element dazu gesellt das Du Struktur rein bekommst die einen Bezug zueinander haben.

[arees]

mh, ok. Das Problem ist das ich ungefähr 20 von diesen boxen habe und ich den nicht alle ne id vergeben möchte. Oder wie in deinem Beispiel so mit switch.

[arees]

Wenn ich auf die Überschrift klicke soll ja die box ausklappen. Nun möchte ich aber das ich wenn ich drauf sie ausfährt und wenn ich dann nochmal draufklicke sie wieder einfährt. Dazu benutze ich .toggle nur fährt sie jetzt von links nach rechts aus, sie soll aber nur von oben ausklappen. Kann man da irgwie die Richtung bestimmen? auf der jquery docu steht davon nichts?!

[Martin Kraft]

Zitat von arees

mh, ok. Das Problem ist das ich ungefähr 20 von diesen boxen habe und ich den nicht alle ne id vergeben möchte. Oder wie in deinem Beispiel so mit switch.

Ich find die Konstruktion mit den ganzen ids und der switch-Anweisung auch nicht sonderlich flexibel...

Stattdessen würde ich das so lösen:

PHP-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>NaviTest</title>

    <style type="text/css">
       
        .navi li, .navi ul {
            list-style:none;    
            padding:0;
            margin:0;
        }
        
        .navi a{
            text-decoration:none;
            font-family:Arial, Helvetica, sans-serif;
            color:#888;
        }
        
        .navi a:hover{
            color:#000;
        }
        
        .navi > li{
            float:left;
            margin-right:20px;
        }
        
        .navi > li > ul {
            display:none;
        }
        
        .navi > li > ul > li {
            border-bottom:dotted 1px #888;
            padding-bottom:10px;
            margin-bottom:10px;
        }
        
        .navi > li > a {
            display:block;
            border-bottom:solid 1px #888;
            padding-bottom:10px;
            margin-bottom:10px;
        }
        
        .nojs .navi > li:hover > ul {
            display:block;
        }    
    </style>
    
    <script language="JavaScript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("*").removeClass("nojs");
            $(".navi > li").hover(function(){
                $(this).children("ul").fadeIn();
            }, function(){
                $(this).children("ul").fadeOut();
            });
        });
    </script>
</head>

<body class="nojs">

    <ul class="navi">
        <li><a href="#">HauptNaviPunkt1</a></li>
        <li><a href="#">HauptNaviPunkt2</a>
            <ul id="navi">
                <li><a href="#">SubNaviPunkt1</a></li>
                <li><a href="#">SubNaviPunkt2</a></li>
                <li><a href="#">SubNaviPunkt3</a></li>
                <li><a href="#">SubNaviPunkt4</a></li>
                <li><a href="#">SubNaviPunkt5</a></li>
                <li><a href="#">SubNaviPunkt6</a></li>
            </ul>
        </li>
        <li><a href="#">HauptNaviPunkt3</a></li>
        <li><a href="#">HauptNaviPunkt4</a>
            <ul id="navi">
                <li><a href="#">SubNaviPunkt1</a></li>
                <li><a href="#">SubNaviPunkt2</a></li>
                <li><a href="#">SubNaviPunkt3</a></li>
                <li><a href="#">SubNaviPunkt4</a></li>
            </ul></li>
        <li><a href="#">HauptNaviPunkt5</a>
            <ul id="navi">
                <li><a href="#">SubNaviPunkt1</a></li>
                <li><a href="#">SubNaviPunkt2</a></li>
                <li><a href="#">SubNaviPunkt3</a></li>
                <li><a href="#">SubNaviPunkt4</a></li>
                <li><a href="#">SubNaviPunkt5</a></li>
            </ul></li>
        <li><a href="#">HauptNaviPunkt6</a></li>
        <li><a href="#">HauptNaviPunkt7</a></li>
    </ul>
      
</body>
</html> 


Diese Code funktioniert sowohl ohne (reines CSS, hartes Einblenden) als auch mit JavaScript (jQuery, weiches Einblenden), verwendet eigentlich nur eine CSS-Klasse (nojs wird nur für das Umschalten auf die JS-Version gebraucht) und hat zudem eine semantisch sauber aufgebaute HTML-Struktur ohne überflüssige Grafikelemente.

[arees]

danke

eine andere frage habe ich noch, und zwar möchte mit javascript die anzahl an bildern in lenght ausgeben.
beispiel:

<div id="image_box">
<img src="http://www.flashforum.de/forum/images/bild1.jpg" id="img" class="img" />
<img src="http://www.flashforum.de/forum/images/bild2.jpg" class="img" />
<img src="http://www.flashforum.de/forum/images/bild3.jpg" class="img" />
</div>

aus diesem div möchte ich die anzahl an bildern ausgeben.

mein versuch

	var bildnummer = document.getElementById("image_box").document.getElementsByName("img").lenght;

wie mach ich das denn? so klappts leider nicht


grüße arees

[Martin Kraft]

Warum einfach (mit jQuery) wenn's auch kompliziert (mit getElementById bzw. getElementsByName) und mit Tipp-(length) bzw. Struktur-Fehlern (.document.) geht?!

PHP-Code:

$("#image_box > img").length; 


Die class und id bei den Bildern kannst Du Dir schenken!

[arees]

ich will es ja extra nicht mit jquery machen

wie würdest du es ohne jquery machen?

[Martin Kraft]

Zitat von arees

wie würdest du es ohne jquery machen?

Warum sollte man das wollen? Für genau sowas wurde jQuery erfunden!

Wenn Du dass ohne jQuery so basteln möchtest, dass es in wirklich allen Browsern funktioniert, produzierst Du nur unnötigen OverHead und baust letztlich in Teilen jQuery nach!