Использование переменной в селекторе с данными идентификатором атрибута

Question

У меня есть несколько изображений, которые имеют DATA- атрибут как:

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

Я хочу, чтобы добавить слушателя событий, чтобы получить следующую картину в серии. Я полагал, что я могу это сделать:

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 + ']'); */ 

где я получить следующий объект элемента изображения в серии, а затем я вставить его в элемент #mypopup изображения. Однако при запуске я получаю незаконное строковое сообщение. Кто-нибудь знает, как включить переменную в селектор атрибутов querySelector? Заранее спасибо ...

Answer 1

При использовании attribute selectors как [attr = value],

Значения атрибутов должны быть CSS identifiers или strings.

Вы не указали значение, поэтому оно разобрано как identifier. Тем не менее,

В CSS, идентификаторы [...] не может начинаться с цифры

Таким образом, ваш числовой селектор является недействительным. Вы можете:

• Исключить значение, например. если y является 123 вам нужно \31 23

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

• Используйте строки, например если вы знаете, y не содержит кавычки,

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