Как получить имя класса html-тега с помощью js(можно и jquery)?

Question

[Никита Братский]

$(this).attr('class')
Тестировал данный фрагмент кода сначала с одной строкой, после того как php скрипт(цикл) стал выводить больше строк, появились проблемы с получением имени класса. Суть такова, что в каждой строке есть кнопка с одним и тем же айдишником, которая вызывает кастомное диалоговое окно(обращается к одному и тому же, вот пример: Тык). Поборол проблему с открыванием от обоих кнопок(раньше только от первой кнопки открывалось), прописав в теге событие onClick:

<button id='clk' class='".$i."' onclick='clickBtn()'>Кнопка</button>

, но теперь вместо имени класса, получается достать undefined только, т.е 1, 2, 3, как должно быть не вытаскивается, хотя в браузере отслеживается изменение имени класса. Безопасность не столь важна, поскольку пишу для себя. Заранее спасибо!

Comments

[Ankhena]

Суть такова, что в каждой строке есть кнопка с одним и тем же айдишником,

Суть айдишника такова, что он должен быть уникальным... в отличие от класса.

[Никита Братский]

Ankhena, если это не представляется возможным? Просто таскать все время js-скрипт в цикле - бессмысленно, как еще можно избавиться от проблемы с получением имени класса?

[Ankhena]

Никита Братский, в смысле "не представляется возможным"?
Задавать разные id, а к кнопкам обращаться по классам?
Ну наймите того, для кого это возможно :)

Зачем имя класса-то, кстати?

[Никита Братский]

Ankhena, передаю туда id-шник фотки в директории

[Ankhena]

Никита Братский,
Алгоритм:
1. Кнопкам задавайте разные id.
2. Этим же кнопкам задавайте одинаковые классы.
3. В js обращайтесь к кнопкам через класс.
4. id фотки передавайте в data- атрибут

[Никита Братский]

Ankhena,

function clickBtn(e){
	var btn = document.getElementsByClassName('myBtn')[0];
	alert(btn.dataset.src);
	var elem = document.createElement("img");
    elem.setAttribute("src", '/photos/'+btn.dataset.src);
    var div = document.createElement("div");
    div.setAttribute("id", "img");
    document.getElementById("divi").appendChild(div);
    document.getElementById("img").appendChild(elem);
    window.style.display = 'block';
  	e.preventDefault();
  	return false;
}

Фотка удаляется при закрытии окна так:

var elem = document.getElementById("img");
    elem.parentNode.removeChild(elem);

Код кнопки такой:

<button id='myBtn".$i."' class='myBtn' onclick='clickBtn(event)' data-src='".$ph[$i]."'>Открыть изображение</button></div>

Который день уже бьюсь, чтобы при открытии окна открывалась одна фотка, расположенная рядом с кнопкой, а при закрытии окна и повторном вызове функции открытия окна, но уже кнопкой рядом с другой фотографией, открывалась соответствующая фотка. Помогите, пожалуйста решить проблему, ибо на js пишу только за счет опыта в других ЯП, так-то я его не знаю.
P.s Открывается предыдущая фотографии при повторном открытии

[Ankhena]

Никита Братский,
https://jsfiddle.net/hL6mft9e/
https://jsfiddle.net/6x1ynheu/

[Никита Братский]

Ankhena, спасибо большое!) Сейчас опробую. А как ваш ответ отметить, как решение?

[Ankhena]

Никита Братский, написала в ответы

[Никита Братский]

Ankhena, сейчас отмечу)

Answer 1

[Ankhena]

https://jsfiddle.net/hL6mft9e/
https://jsfiddle.net/6x1ynheu/