Получение номера класса, по которому произведен клик
Добрый день, уважаемые форумчани. Заранее прошу не кидать в меня камнями. Перед мною встала задача, которую можно было бы решить намного проще используя "GetElementById", но все таки я хочу реализовать задумку именно так.
Суть в том, что есть меню опций, с одинаковыми цсс классами. По клике на каждый из них рядом с ним должна появится галочка - (отмечено, мол), по еще одному клику - галочка должна снятся. С добавлением галчоки (в моем случае img) особых пробелм не возникло, а вот с удалением - нужна ваша помощь. Собственно, вот мой быдло-код:
<script>
$(document).ready(function()
{
$(".round-img").click(function()
{
var clicked = document.getElementsByClassName('setting-row');
for (var i = 0; i < clicked.length; i++)
{
clicked[i].addEventListener("click", adding);
function adding(){
{
var o=document.createElement('img');
o.src='img/system/yes.png';
o.className="yes-marker";
this.appendChild(o);
/*console.log($(this));*/
}
if (this.appendChild(o))
{
clicked[i].addEventListener("click", del)
function del()
{
this.removeChild(o);
}
};
}
}
})
})
</script>
|
Illibes,
минимальный html и css сделайте, и лучше не назначать клик в клике, если нет цели исчерпать ресурсы. |
дело в том, что css и html мне как раз аткки править не желательно. Но свою ошибку я уже, кажется, нашел.. итый элемент все арвно попросту доходил до конца и был равен десяти.
Решение, которое более лаконично и как по мне правильно, не до конца у меня работает, но это вопрос времени:
(function () {
var divs = document.querySelectorAll(".setting-row");
var handler = function() {
var index = Array.prototype.indexOf.call(divs, this);
var o=document.createElement('img');
o.src='img/system/yes.png';
o.className="yes-marker";
document.getElementsByClassName('setting-row')[index].appendChild(o);
}
for (var i = 0; i < divs.length; i++) {
divs[i].onclick = handler;
}());
|
Illibes,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.setting-row{
border: 1px dashed Gray; padding: 5px; height: 100px; width: 100px ;
background-color: rgba(139, 69, 19, 1);
}
</style>
<script>
window.addEventListener('DOMContentLoaded', function() {
var o=document.createElement('img');
o.src='http://superadm.net/uploads/icons/camera_test.png';
o.classList.add("yes-marker");
var divs = document.querySelectorAll(".setting-row");
[].forEach.call(divs, function(item) {
item.addEventListener('click', function() {
var img = item.querySelector('.yes-marker');
if (img) item.removeChild(img);
else item.appendChild(o.cloneNode())
});
});
});
</script>
</head>
<body>
<div class="setting-row"></div>
<div class="setting-row"></div>
<div class="setting-row"></div>
</body>
</html>
|
Illibes,
пост №4 запустите код и кликайте по блокам |
Вы просто лучший
|
| Часовой пояс GMT +3, время: 05:37. |