jQuery Frage

ninom

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

synaptic

geht bestimmt auch besser, aber hier haste es funktionierend auf fix geschrieben

HTML

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

Alles anzeigen

jQuery Frage

Tags

Benutzer online in diesem Thema