JavaScript jQuery / MouseOver

Rammsie · 15. Februar 2016

Moin Moin,

mir ist leider kein besserer Titel eingefallen. Ich bastel gerade an einem Bewertungsscript (5 Sterne).

Dafür benutze ich folgenden jQuery-Codeschnipsel, den ich im Netz gefunden habe:

Code:

<!-- Mouseover -->
<script type="text/javascript">
$(document).ready(function(){
    $('#rating').hover(function(){
    $('.star_off').mouseover(function(){
      $(this).removeClass('star_off').addClass('star_on');
      $(this).prevAll('.star_off').removeClass('star_off').addClass('star_on');
      $(this).nextAll('.star_on').removeClass('star_on').addClass('star_off');
    });
  }, function() {
    $('.star_on').removeClass('star_on').addClass('star_off');
  });
});
</script>

<!-- Bewertungbox(#1) -->
<ul id="rating">
  <li class="star_off"><a title="1 Stern" href="?star=1">1 Stern</a></li>
  <li class="star_off"><a title="2 Sterne" href="?star=2">2 Sterne</a></li>
  <li class="star_off"><a title="3 Sterne" href="?star=3">3 Sterne</a></li>
  <li class="star_off"><a title="4 Sterne" href="?star=4">4 Sterne</a></li>
  <li class="star_off"><a title="5 Sterne" href="?star=5">5 Sterne</a></li>
</ul>

Funktioniert auch: Bei MouseOver switcht er bis zum ausgewählten Stern auf "star_on", alle darauffolgenden bleiben auf "star_off". Wenn ich die Maus wieder weg bewege, switcht er alle zurück auf "star_off". Soweit so gut...

Ich möchte nun mehrere verschiedene Bewertungen auf einer Seite platzieren. Wenn ich aber eine weitere "Bewertungbox(#2)" einfüge, ist es so, dass dort der MouseOver-Effekt zwar funktioniert, aber der Switch zurück auf "star_off" funktioniert nicht. Dieser funktioniert nur wenn ich "Bewertungbox(#1)" betätige. Wenn ich die Box dort mir der Maus verlasse, switcht er alles (auch bei "Bewertungbox(#2)") auf "star_off".

Was muss ich ändern, damit der Switch auf "star_off" bei jeder Bewertungsbox funktioniert?

Da ich sonst eigentlich gar nicht mit JS oder jQuery arbeite, komme ich einfach nicht weiter. Ich hoffe, dass mein Text verständlich ist und mir hier jemand weiterhelfen kann.

blablub1212 · 15. Februar 2016

Um eine zweite Box einzuführen musst du sowohl in deinem CSS als auch in deinem JavaScript Wildcards verwenden, da beides auf eine fixe ID reagiert. Ich hab das mal kurz zusammen geklickt und denke, dass sollte dir weiterhelfen

Code:

<html>

<head>
  <style>
    ul[id*="rating"] li {
      float: left;
    }

    ul[id*="rating"] li.star_off {
      background: url('http://abcamping.com/layout/images/icons/star_off_48.png') no-repeat left top;
    }

    ul[id*="rating"] li.star_on {
      background: url('http://abcamping.com/layout/images/icons/star_48.png') no-repeat left top;
    }

    ul[id*="rating"] a {
      display: block;
      font-size: 0px;
      width: 48px;
      height: 48px;
    }
  </style>
</head>

<body>
  <!-- Bewertungbox(#1) -->
  <ul id="rating1">
    <li class="star_off"><a title="1 Stern" href="?star=1">1 Stern</a></li>
    <li class="star_off"><a title="2 Sterne" href="?star=2">2 Sterne</a></li>
    <li class="star_off"><a title="3 Sterne" href="?star=3">3 Sterne</a></li>
    <li class="star_off"><a title="4 Sterne" href="?star=4">4 Sterne</a></li>
    <li class="star_off"><a title="5 Sterne" href="?star=5">5 Sterne</a></li>
  </ul>
  <!-- Bewertungbox(#2) -->
  <ul id="rating2">
    <li class="star_off"><a title="1 Stern" href="?star=1">1 Stern</a></li>
    <li class="star_off"><a title="2 Sterne" href="?star=2">2 Sterne</a></li>
    <li class="star_off"><a title="3 Sterne" href="?star=3">3 Sterne</a></li>
    <li class="star_off"><a title="4 Sterne" href="?star=4">4 Sterne</a></li>
    <li class="star_off"><a title="5 Sterne" href="?star=5">5 Sterne</a></li>
  </ul>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <!-- Mouseover -->
  <script type="text/javascript">
    $(document).ready(function() {
      $('[id^=rating]').hover(function() {
        $('.star_off').mouseover(function() {
          $(this).removeClass('star_off').addClass('star_on');
          $(this).prevAll('.star_off').removeClass('star_off').addClass('star_on');
          $(this).nextAll('.star_on').removeClass('star_on').addClass('star_off');
        });
      }, function() {
        $('.star_on').removeClass('star_on').addClass('star_off');
      });
    });
  </script>
</body>

</html>

Rammsie · 15. Februar 2016

Autsch, auf die "ID" hätte ich auch selber kommen können....

Vielen Dank für deinen Beitrag, hat mir sehr geholfen und das Problem gelöst!

Suche

JavaScript jQuery / MouseOver

Rammsie

Lt. Junior Grade

blablub1212

Rear Admiral

Rammsie

Lt. Junior Grade

Ähnliche Themen