jQuery: Bei Click auf Link/Button Ändern des Elements, das Mousedown selektiert wird

  • Themenstarter Themenstarter Netzwerkidi
  • Beginndatum Beginndatum
N

Netzwerkidi

Hallo,

Frage an die Experten: Ich will mit Hilfe von jQuery bei Klick auf einen Link danach ein anderes Element, das ich mit der Maus auswähle möchte mittels mousedown, ändern. Z. B. soll die Farbe des Backgrounds geändert werden.

Besser wäre natürlich, das ganze dynamischer zu machen über eine Art Auswahlmenü und/oder über rechte Maustaste statt fest über einen Link oder einen Button und eine festdefinierte Funktion. Aber zuerst will ich das Ganze mal verstehen.

Weiß einer, wie ich das mache? Oder wo kann ich nachschauen? Ich suche schon die ganze Zeit bei jQuery und über Google, aber irgendwie ist der Groschen noch nicht gefallen.

Ansatz bisher war:

Code: 
$("#MyA").bind('click', function(event) {
  $(ZielElement).css("background-color","red);
});

Grüße
 
Zuletzt bearbeitet von einem Moderator:
Hi,

du könntest einen Bereich, eine Sammlung Elemente mit gleichem Attribut oder alle Elemente im Dokument bei einem Klick auf einen Link mit den notwendigen Event-Handlern versehen. Wird nun ein Element geklickt, wird es wie gewünscht formatiert und die Handler werden von den vorher ausgezeichneten Elementen wieder entfernt.

Beispiel:
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script src="../JS-Scripts/jquery/jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
  <!--
$(function(){
  $('.startIt').click(function(evt){
    // Neue Farbe aus title-Attribut
    var strCol = $(this).attr('title');
    // Standard-Funktion verhindern
    evt.preventDefault();

    // Alle Elemente im Element mit der ID "elemWrapper" mit den gewünschten Event-Handlern auszeichnen
    $('#elemWrapper *').bind('mouseenter.mark_all', function(){
      // Aktuelles Element mit Hintergrundfarbe hinterlegen, wenn der Cursor darüber ist
      $(this).css({
        background: '#ccc'
      });
    }).bind('mouseleave.mark_all', function(){
      // Hintergrundfarbe wieder zurücksetzen, wenn Cursor das Element verlässt
      $(this).css({
        background: ''
      });
    }).bind('click.mark_all', function(evt){
      // Standard-Funktion unterbinden
      evt.preventDefault();

      // Event-Handler wieder entfernen
      $('#elemWrapper *').unbind('click.mark_all').trigger('mouseleave.mark_all').unbind('mouseenter.mark_all').unbind('mouseleave.mark_all');

      // Neue Farbe zuweisen
      $(this).css({
        color: strCol
      });

    });
  });
})
 //-->
</script>
</head>
<body>
<ol>
  <li>Farbe wählen</li>
  <li>Cursor über gewünschtes Element im umrandeten Bereich bewegen</li>
  <li>Farbe durch Klicken an Element zuweisen</li>
</ol>
<a href="#" class="startIt" title="#f00" style="color: #f00;">rot</a>
<a href="#" class="startIt" title="#0f0" style="color: #0f0;">gruen</a>
<a href="#" class="startIt" title="#00f" style="color: #00f;">blau</a>
<a href="#" class="startIt" title="" style="color: #000;">ohne</a>

<div id="elemWrapper" style="border: 1px solid #000; background: #efefef; width: 400px; height: 400px;">
  <a href="#">Link</a>
  <p>Absatz</p>
  <div>DIV</div>
  <h1>Überschrift</h1>
</div>
</body>
</html>
Ciao
Quaese
 
Hai Quaese,

wie sagte mein früherer Cheffe immer: das unterscheidet den Tüftler vom Proffi!

Vielen Dank für Deine Mühe zu unchristlicher Zeit.

Welche Bedeutung hat dieses ".mark_all", weil es ja auch ohne lauffähig ist?


Grüße

Netzwerkidi
 
Zuletzt bearbeitet von einem Moderator:
Hi,

dabei handelt es sich um sogenannte namespaces. Durch sie lassen sich Events besser verwalten und es wird z.B. ermöglicht, den richtigen Handler von einem Element zu nehmen, wenn dieses mehr als einen besitzt.

Mehr findest du in der jQuery-Doku unter unbind oder hier.

Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück