Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.10.2018, 15:39
Аватар для Kiten
Интересующийся
Отправить личное сообщение для Kiten Посмотреть профиль Найти все сообщения от Kiten
 
Регистрация: 18.05.2018
Сообщений: 16

Не получается, изменение атрибутов по тегу
Всем привет!
Мне нужно сделать скрипт, который делает следующее:
1. Находит все элементы по тегу <img>;
2. Присваивает им атрибут onclick с разными значениями;

На выходе должны произойти такие изменения:

<div class="gallery">
	<img src="img/1.jpg" alt="" onclick="qwerty(0)">
	<img src="img/2.jpg" alt="" onclick="qwerty(1)">
	<img src="img/3.jpg" alt="" onclick="qwerty(2)">
</div>


Подскажите пожалуйста, как правильно преобразовать переменную, чтобы там были числа (а не имя переменной i)? Вот листинг:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="css/normalize.css">
	<link rel="stylesheet" type="text/css" href="css/skeleton.css">
	<link rel="stylesheet" type="text/css" href="css/main.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
</head>
<body>

<div class="container">
	<div class="gallery">
		<img src="img/1.jpg" alt="">
		<img src="img/2.jpg" alt="">
		<img src="img/3.jpg" alt="">
	</div>
	<button onclick="dp()">BUTTON</button>
</div>

<script>
function dp() {
    var x = document.getElementsByTagName("IMG");
    var i;
    for (i = 0; i < x.length; i++) {
		x[i].setAttribute("onclick", "qwerty(i)");
    }
}
function qwerty(i) {
	Alert(i);
}
</script>
	
</body>
</html>


Буду благодарен за любую помощь!
Ответить с цитированием
  #2 (permalink)  
Старый 17.10.2018, 15:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,124

Kiten,
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <link rel="stylesheet" type="text/css" href="css/skeleton.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
</head>
<body>

<div class="container">
    <div class="gallery">
        <img src="img/1.jpg" alt="">
        <img src="img/2.jpg" alt="">
        <img src="img/3.jpg" alt="">
    </div>
    <button onclick="dp()">BUTTON</button>
</div>

<script>
function dp() {
    var x = document.getElementsByTagName("IMG");
    var i;
    for (i = 0; i < x.length; i++) {
        x[i].addEventListener("click", qwerty(i));
    }
}
function qwerty(i) {
  return function() {
          alert(i);
}
}
</script>

</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 17.10.2018, 16:15
Аватар для Kiten
Интересующийся
Отправить личное сообщение для Kiten Посмотреть профиль Найти все сообщения от Kiten
 
Регистрация: 18.05.2018
Сообщений: 16

рони,
Спасибо большое! Как раз как я хотел)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Jquery - Циклическое изменение атрибутов элемента при клике на него mxup Общие вопросы Javascript 3 20.07.2016 20:11
Как зафиксировать изменение input Vladislav306907 jQuery 2 12.05.2016 14:05
Не получается адаптировать код pricebody Общие вопросы Javascript 2 18.03.2016 20:03
Изменение состояния DOM denysdovhan Events/DOM/Window 10 27.05.2014 12:54
изменение атрибутов по событию sosed2 jQuery 1 28.03.2012 00:47