Ребят! Помогите пожалуйста! Весь интернет перерыл, хотел найти, что нибудь в качестве примера...
Задача:
Есть кнопки, не важно сколько, хоть 100 штук, допустим, только 3. И также есть 3 span'a. Мне нужно сделать, чтобы нажал на первый баттон, спан первый убрался, нажал на второй, второй спан убрался и т.д.
Хотел сделать с if ,но сказали: "А если у тебя 100 баттонов, будешь делать 100 if?". Говорят, что надо, как-то с циклом. Но как? Цикл и в функции, и сама функция в цикле.
Ну, или, как-то по другому.. Т.е. Одна функция для всех кнопок и их может быть неограниченное количество. Добавь, например, еще 5 кнопок и 5 спанов, чтобы также все работало..
Вот, что я пробовал сделать:
index.html:
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<div class="main">
<div class="first">
<button type="button" class="btn" id="btn1">btn1</button>
<h2><span class="text" id="text1">Text1</span></h2>
</div>
<div class="second">
<button type="button" class="btn" id="btn2">btn2</button>
<h2><span class="text" id="text2">Text2</span></h2>
</div>
<div class="third">
<button type="button" class="btn" id="btn3">btn3</button>
<h2><span class="text" id="text3">Text3</span></h2>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
script.js:
$(document).ready(function () {
$(function () {
$('.btn').on('click', function () {
alert('Обработчик для кнопки: ' + $(this).text());
$('.text').css('display', 'none');
});
});
});