Ergebnis 1 bis 2 von 2

Thema: jQuery Frage

  1. #1
    ninom
    Gast

    Standard jQuery Frage

    Hi,

    Habe vor kurzem mit jQuery angefangen und bin eigentlich ziemlich angetan.

    Wie kann man folgendes Problem lösen:

    Code:
    <div id="location-div-1" class="location-div">
          <div id="location-img-1" class="location-img-div">
            <img class="location-image" src="bullet_black.png" />
          </div>
          <div id="location-txt-1" class="location-txt-div">
            <span>Test</span>
          </div>
        </div>
    Im Normalfall sieht man nur das Bild. Der Text wird ausgeblendet. Falls der User nun mit der Maus über das Image fährt, sollen sich die beiden Classes von location-txt-1 und location-div-1 ändern. Wie kann ich mit jQuery eine Funktion erstellen, die sowas kann und dabei auch die Zahl berücksichtigt, damit ich später mal mehrere location-div haben kann und der immer das richtige anzeigt.

    Gruss
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: jQuery Frage

    geht bestimmt auch besser, aber hier haste es funktionierend auf fix geschrieben
    HTML-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" dir="ltr" lang="de">
    <head>
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    
    <style type="text/css">
    location-div{
        border: 1px solid red;
        width:300px;
    }
    .location-img-div{
        background:lime;
        border: 1px dotted black;
        width:200px;
        height:100px;
    }
    .location-txt-div {
        display:none;
    }
    .show {
        display:block;
    }
    .blue{
        background:lightblue;
    }
    </style>
    <script type="text/javascript">
        $(document).ready(function(){
            $('.location-div img').mouseover(function(){
                var parentID = $(this).parent().attr('id');
                var idCount = parentID.substr(13, parentID.length);
                $('#location-div-' + idCount).removeClass('location-div');
                $('#location-txt-' + idCount).removeClass('location-txt-div');
                $('#location-div-' + idCount).addClass('blue');
                $('#location-txt-' + idCount).addClass('show');
            });
            
            $('.location-div img').mouseout(function(){
                var parentID = $(this).parent().attr('id');
                var idCount = parentID.substr(13, parentID.length);
                $('#location-div-' + idCount).addClass('location-div');
                $('#location-txt-' + idCount).addClass('location-txt-div');
                $('#location-div-' + idCount).removeClass('blue');
                $('#location-txt-' + idCount).removeClass('show');
            });
        });
    </script>
    </head>
    <body>
       <div id="location-div-1" class="location-div">
          <div id="location-img-1" class="location-img-div">
            <img class="location-image" src="http://f-h.kaninchenrettung.de/file-listing/fleischie_blog/august_10/th_d_filiformis.jpg" />
          </div>
          <div id="location-txt-1" class="location-txt-div">
            <span>Test 1</span>
          </div>
        </div>
        <div id="location-div-2" class="location-div">
          <div id="location-img-2" class="location-img-div">
            <img class="location-image" src="http://f-h.kaninchenrettung.de/file-listing/fleischie_blog/august_10/th_d_filiformis.jpg" />
          </div>
          <div id="location-txt-2" class="location-txt-div">
            <span>Test 2</span>
          </div>
        </div>
        <div id="location-div-3" class="location-div">
          <div id="location-img-3" class="location-img-div">
            <img class="location-image" src="http://f-h.kaninchenrettung.de/file-listing/fleischie_blog/august_10/th_d_filiformis.jpg" />
          </div>
          <div id="location-txt-3" class="location-txt-div">
            <span>Test 3</span>
          </div>
        </div>
    </body>
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

Ähnliche Themen

  1. jquery konflikt?
    Von dodo87 im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 2
    Letzter Beitrag: 22.04.2010, 10:21
  2. wordpress jquery
    Von baadshah im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 1
    Letzter Beitrag: 09.03.2010, 20:23
  3. jQuery Menü
    Von Tobse im Forum Script-Archiv
    Antworten: 0
    Letzter Beitrag: 03.01.2010, 13:21
  4. [JS] jQuery und .submit() !?
    Von Thonixx im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 6
    Letzter Beitrag: 25.12.2009, 21:03
  5. JQuery-prob
    Von synaptic im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 12
    Letzter Beitrag: 18.04.2008, 20:51

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •