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



## Netzwerkidi (24. Januar 2011)

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:


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

Grüße


----------



## Quaese (25. Januar 2011)

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:

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


----------



## Netzwerkidi (25. Januar 2011)

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


----------



## Quaese (25. Januar 2011)

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


----------

