Holen Sie Variablen von Button CSS in Javascript und verwenden Sie sie als ID

Question

Hallo, ich brauche ein bisschen Hilfe bei der Änderung meines Skripts. Was ich machen möchte: Ich habe ein kleines und einfaches Skript. Es ändert die Klasse eines Containers, so dass ich Einfluss auf das Verhalten und Aussehen des Containers habe. In meinem Szenario öffnen die Tasten ein Div mit einem Musikplayer.

Mein Problem ist, dass ich alle Tasten als Skript deklarieren muss. Die Button-ID ist in meinem Fall die Onclick-Funktion (siehe Code).

Also wenn ich 10 oder 20 Links habe, muss ich auch jedes Mal das Skript ändern. Meine Idee ist, ein Skript zu haben, das ihre Variablen nach IDs und Klassen von Containern füttert. Daher muss ich die Skriptdatei nicht ändern.

// JavaScript Document 
function AudioFF() { 
    var FFplayer = document.getElementById(x); 
    if (FFplayer.classList.contains("audio-hidden")) { 
     FFplayer.classList.remove("audio-hidden"); 
     FFplayer.classList.add("audio-shown"); 
    } else { 
     FFplayer.classList.remove("audio-shown"); 
     FFplayer.classList.add("audio-hidden"); 
     Array.prototype.slice.call(document.querySelectorAll('audio')).forEach(function(audio) {audio.pause();}); 
    } 
}; 

dbbtn.onclick = function() { 
    x = "deepblue"; 
    AudioFF(); 
}; 

swbtn.onclick = function() { 
    x = "spacewalk"; 
    AudioFF(); 
}; 

fbtn.onclick = function() { 
    x = "forest"; 
    AudioFF(); 
}; 

drbtn.onclick = function() { 
    x = "dreamrhythm"; 
    AudioFF(); 
}; 

Meine Idee war, die gleiche Klasse auf eine Schaltfläche als ID für den Behälter zu verwenden, die mit einem String verblassen in muss. Der Knopf hat z.B. die Klasse btn_a, btn_b ... usw. Der Container hat die ID btn_a, btn_b ... Ich wollte, dass das Skript die Klasse der Schaltfläche abfängt und diesen Klassennamen als Variable für getElementById verwendet. Der closebutton verwendet das gleiche Skript, um den Container zu schließen. Vielen Dank für die Hilfe :-)

Answer 1

ich werde empfehlen, stattdessen data Attribut zu verwenden

Beispiel wie folgt aus:

//register listener like this 
 
var btns = document.querySelectorAll('[data-music]'); 
 
btns.forEach(function(elm) { 
 
    elm.addEventListener('click', function(e) { 
 
    //your function 
 
    console.log(this.dataset.music); 
 
    }) 
 
})

<!--your links--> 
 
<div id="m1"></div> 
 
<div id="m2"></div> 
 
<div id="m3"></div> 
 

 
<!--just add data-music attribute make it the same with your div id and all set--> 
 
<button data-music="m1">play m1</button> 
 
<button data-music="m2">play m2</button> 
 
<button data-music="m3">play m3</button>

Answer 2

sollten Sie in der Lage sein, auf die Tasten, um ein Daten-Tag-Attribut gesetzt und lesen Sie einfach die Variable aus, dass:

<button id="myButton" data="variableForMyButton" /> 

document.getElementById(myButton).onClick = function(e){ 
    x = e.target.getAttribute('data') 
} 

Wenn mehrere params Sie zusätzliche Daten-Tags hinzufügen, sind erforderlich:

<button id="myButton" data="variableForMyButton" data-action="someSweetAction" /> 

Answer 3

Danke Jungs, das war, was ich suchte. Meine Funktion ist jetzt so: Der Play-Button und der Close-Button funktionieren.

<button data-music="m1">Deep Blue</button> 
<div id="m1">Container Content</div> 


var btns = document.querySelectorAll('[data-music]'); 
btns.forEach(function(elm) { 
    elm.addEventListener('click', function(e) { 
    //function 
    var FFplayer = document.getElementById((this.dataset.music)); 
    if (FFplayer.classList.contains("audio-hidden")) { 
     FFplayer.classList.remove("audio-hidden"); 
     FFplayer.classList.add("audio-shown"); 
    } else { 
     FFplayer.classList.remove("audio-shown"); 
     FFplayer.classList.add("audio-hidden"); 
     Array.prototype.slice.call(document.querySelectorAll('audio')).forEach(function(audio) {audio.pause();}); 
    } 
    }) 
}) 

Answer 4

Und hier in jquery. Danke an alle. Du zeigst mir den Weg :-)

jQuery (document).ready(function($){ 
     var btns = $('[data-music]'); 
     $(btns).each(function() { 
     $('[data-music]').on('click', function(e) { 
      var FFplayer = $(this).data('music'); 
      $("#" + FFplayer).toggleClass("audio-hidden audio-shown"); 

    }); 
}); 
})