Javascript | Ändern src in Datenattribut aktiv

Question

Ich versuche, die Auswahl eines Bildes basierend auf einem Datenattribut von 'Daten aktiv' zu ändern.

Wenn data-active gleich true ist, wird das Bild in etwas geändert, das anzeigt, dass die Plattform ausgewählt wurde und alle anderen die Auswahl aufheben, wenn nur eine angezeigt wird.

Das Problem, das ich derzeit habe, ist, dass das Bild die aktuelle Plattform, die angeklickt wird, die deaktivierten Bilder an das aktuelle Bild klickt, auf deaktiviert deaktiviert, so dass die Bilder nicht ordnungsgemäß funktionieren.

Sie können dies hier sehen ... https://miotks.co.uk/register (ich selbst zugewiesen Zertifikat)

Das ist mein aktueller Code ist, dass ich für sie ...

function checkState(obj, platform) { 
var checkActive = document.querySelectorAll("[data-active='true']"); 
var alreadyActive = checkActive.length; 

if (alreadyActive >= 2) { 
    for (var i = 0; i < checkActive.length; i++) { 

     // Reset the images to the default when all changed to false. 
     checkActive[i].setAttribute('data-active', 'false'); 
     checkActive[i].setAttribute('src', '/images/' + platform + '-noselect.png'); 

     obj.setAttribute('data-active', 'true'); 
     obj.setAttribute('src', '/images/' + platform + '-select.png'); 
    } 
} else { 

}} 

Sie beurteilt die Länge Wie viele Elemente ausgewählt sind und "wahr" haben, sobald diese 2 übersteigt oder gleich ist, werden alle zurückgesetzt und sollten auf die aktuelle umgestellt werden.

Dies ist, wie ich die Funktion auf dem Click-Ereignis nenne ...

checkState(this, 'steam'); 

Answer 1

Es sieht aus wie Sie gerade die -select zu -noselect in jeder URL des Bildes ändern können:

function checkState(obj, platform) { 
    var checkActive = document.querySelectorAll("[data-active='true']"); 
    var alreadyActive = checkActive.length; 

    if (alreadyActive) { 
     for (var i = 0; i < checkActive.length; i++) { 
      // Reset the images to the default when all changed to false. 
      checkActive[i].setAttribute('data-active', 'false'); 
      checkActive[i].src = checkActive[i].src.replace('-select', '-noselect'); 
     } 
    } 

    obj.setAttribute('data-active', 'true'); 
    obj.src = obj.src.replace('-noselect', '-select'); 
}