eine Variable in Selektor mit dem Daten-id-Attribut Mit

Question

ich ein paar Bilder haben, die eine Daten- Attribut wie haben:

<img id="popup" class="Absolute_Center is_Image" alt="Girl Popup" data-picture=""> 

     <img src="https://s3-us-west-2.amazonaws.com/example.jpg" data-picture = "1"> 
     <img src="https://s3-us-west-2.amazonaws.com/example2.jpg" data-picture = "2"> 
     etc... 

Ich möchte ein Ereignis-Listener hinzufügen, um das nächste Bild in der Reihe abzurufen. Ich dachte, ich kann dies tun:

var oimgPopup = document.getElementById("popup"); 


/* retrieve data-picture value of current image showing in the image popup */ 
var y = oimgPopup.dataset.picture; 
    var y = oimgPopup.dataset.picture; 
    y = y + 1; 
    // Prints out corect data-picture value + 1 

    var nextImage = document.querySelector('[data-picture =' + y + ']'); 
    console.log(nextImage); 
    /* SyntaxError: An invalid or illegal string was specified 
     var nextImage = document.querySelector('[data-picture =' + y + ']'); */ 

, wo ich das nächste Bild Elementobjekt in der Serie abruft und dann werde ich es in #mypopup Bildelement einzufügen. Allerdings erhalte ich eine ungültige String-Nachricht, wenn ich dies ausführe. Kann jemand eine Variable in den QuerySelector-Attributselektor integrieren? Vielen Dank im Voraus ...

Answer 1

Wenn Sie einen attribute selectors wie [attr = value],

Attributwerte CSS identifiers oder strings sein muss.

Sie haben den Wert nicht angegeben, daher wird er als identifier geparst. Allerdings

In CSS Identifikatoren [...] kann nicht mit einer Ziffer

Daher Ihr numerischer Selektor ist ungültig starten. Sie können:

• Der Wert, z. wenn y ist 123 Sie benötigen \31 23

  document.querySelector('[data-picture =' + CSS.escape(y) + ']') 
  

• Verwenden Strings, z wenn Sie y kennt Anführungszeichen nicht enthalten,

  document.querySelector('[data-picture = "' + y + '"]')