Rückgabe verschiedener Werte abhängig von div geklickt

Question

Ich muss eine Funktion schreiben, die eine Zeichenfolge abhängig von einem div geklickt zurückgibt.

<div id="footer"> 
<table> 
    <tr> 
<td><div id="selectpeg1" onclick="selectPeg()"></div></td> 
<td><div id="selectpeg2" onclick="selectPeg()"></div></td> 
<td><div id="selectpeg3" onclick="selectPeg()"></div></td> 
<td><div id="selectpeg4" onclick="selectPeg()"></div></td> 
    </tr> 
</table> 

Die selectPeg() Funktion entweder eine Zeichenfolge oder ein "Hintergrund" Parameter in der CSS-Datei (auch als String) befindet zurückzukehren. Also, wenn ich auf einem ersten Pflock klicken, kann die Funktion zurückgeben „blau“, wenn ich den zweiten peg klicken Sie auf die Funktion „rot“ liefert und so weiter ...

CSS:

#selectpeg1 { 
width: 50px; 
height: 50px; 
background: yellow; 
-moz-border-radius: 25px; 
-webkit-border-radius: 25px; 
border-radius: 30px; 
border-style: solid; 

}

Answer 1

wenn Sie Javascript und nicht JQuery verwenden möchten, dann müssen Sie die folgende Änderung vornehmen.

1. diesen Pass in dem Funktionsaufruf in dem HTML-Code:

   Onclick = "selectPeg (this)"

2. in der Java-Script-Funktion ein Funktionsargument hinzu:

   Funktion selectPeg (Element)

als Sie können einfach Daten aus dem Element abrufen variabel.

function selectPeg(element) { 

    var id = element.id 
    var backgroud = element.style.background 
    var color = element.style.color 

    // do anything you want to do 
} 

Answer 2

Beispiel 1: https://jsfiddle.net/sheriffderek/nLfvrey7/

Sie 'Daten' verwenden können Attribute ... sie kann alles sein ... data-bananas='2' oder alles, was Sie wollen.

<ul class="thing-list"> 
    <li class="thing" data-info='one'>one</li> 
    <li class="thing" data-info='two'>two</li> 
    <li class="thing" data-info='three'>three</li> 
</ul> 

JavaScript .. mit einigen jQuery

var $thing = $('.thing'); // cache node you'll use early 

function getInfo(target) { // function that gets info from a given target 
    var info = $(target).data('info'); // check target for data-info 
    alert(info); // do something with that info 
} 

$thing.on('click', function() { // attach click event listener 
    getInfo(this); // run function where the target is 'this' - the thing that got clicked... 
}); 

Sie können dies sicherlich schreiben, ohne jQuery: http://youmightnotneedjquery.com/

Aber der Schlüssel hier ist konzeptuell - so, ich bin schreibe einfach, was am schnellsten und am besten lesbar ist. In den meisten Fällen - versuchen, jQuery zu überspringen, ist nur die aktuelle Paket-Mentalität und nicht wirklich mit viel Grund in vielen Fällen.

hier ist ein vollständiges Beispiel mit den Farben für Spaß zu ändern:

Beispiel 2: https://jsfiddle.net/sheriffderek/dm4pofuz/

Answer 3

Kombination data-attributes mit CSS variables für eine saubere Lösung bietet:

function onSelectorClick(event) { 
 
    console.log(this.dataset.color); // TODO: do something with color 
 
} 
 

 
document.querySelectorAll(".selector").forEach(element => { 
 
    element.style.setProperty("--color", element.dataset.color); 
 
    element.addEventListener("click", onSelectorClick); 
 
});

.selector { 
 
    width: 50px; 
 
    height: 50px; 
 
    border-style: solid; 
 
    border-radius: 30px; 
 
    background-color: var(--color, white); 
 
}

<table> 
 
    <tr> 
 
    <td><div class="selector" data-color="red"></div></td> 
 
    <td><div class="selector" data-color="blue"></div></td> 
 
    <td><div class="selector" data-color="green"></div></td> 
 
    <td><div class="selector" data-color="yellow"></div></td> 
 
    </tr> 
 
</table>