Как добавить класс ко всем элементам span?
Мне нужно добавить всем элементам span класс, например test. как это сделать , желательно на jQuery, вот код:
<!DOCTYPE html> <html lang='ru'> <head> <meta charset="UTF-8"> <title>Главная</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="script.js" type="text/javascript"></script> <link rel="stylesheet" href="css.css"> </head> <body> <h1 id="mainText">Тест</h1> <div class="game"> <div class="gameLine"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <div class="gameLine"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <div class="gameLine"> <span id="yes"></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <div class="gameLine"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <div class="gameLine"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <div class="gameLine"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <div class="gameLine"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </div> </body> </html> |
Zombie_Killer,
прочтите документацию по jquery $(function() { $("span").addClass("test") }); |
Цитата:
|
Zombie_Killer,
click |
$('.xz').click(function () { if (this.id === "yes") { alert('You win!'); } else { alert("You lose!"); } }); не подскажите что не так? я хочу чтобы при нажатии на элемент проверялся id и если его id будет yes то должно выводится сообщение you win а если его айди отсутствует то должно выводится you lose |
Цитата:
|
Zombie_Killer,
$(function () { $("span").addClass("xz").click(function () { if (this.id === "yes") { alert('You win!'); } else { alert("You lose!"); } }); }); |
Сундук сокровищ
Zombie_Killer,
Вам предстоит увлекательное путешествие по островам в поисках сундука сокровищ!!! Испытай свою удачу, отважный пират!!! :lol: <!DOCTYPE html> <html lang='ru'> <head> <meta charset="UTF-8"> <title>Главная</title> <style type="text/css">*{ margin: 0; padding: 0; } body{ background-color: lime; } #mainText{ padding-left: 38%; color: #b41414; border-bottom: 2px black solid; } .gameLine{ border-bottom: 1px black solid; } span{ padding: 0px; margin-top: 5px; background-color: #fff; width: 48px; height: 48px; display: inline-block; background-repeat: no-repeat; background-image: url(http://ds9ishim.ru/sites/default/files/images/island_with_palm_trees_transparent_clipart.png); background-size: cover; } span.bum{ background-image: url(http://sharikair.ru/baza/16/11664.jpg); } span.win{ background-image: url(http://cdn.apk-cloud.com/detail/image/eu.hitb.treasurehunt-w130.png); } .game{ background-color: #fff; margin-top: 15px; border: 2px black solid; width: 465px; height: 405px; margin-left: 10%; padding: 0px; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(function () { // когда загрузится разметка страницы var spans = $(".gameLine span"),//находим все span i = Math.random()*spans.length|0, //случайный индекс из общего количества span num = 0,//счётчик кликов end; //флаг окончания игры = false spans.addClass("xz").click(function () { //присвоить класс xz, неизвестно зачем всем span и назначить обработчик для клик if(end|| $(this).is(".bum") ) return; //если закончена игра(end = true) или было нажатие (класс элемента bum) то ничего далее не делать var text = " You lose!", cls = "bum"; //текст и название класса ++num; //увеличили счётчик if (spans.index(this) === i) { //если индекс элемента совппал со случайным text = " You win!"; //меняем текст cls = "win"; //меняем название класса end = true;//флаг окончания игры = true }; $("#mainText").text(num + text)//выводим текст и счётчик $(this).addClass(cls); //устанавливаем класс }); }); </script> </head> <body> <h1 id="mainText">Тест</h1> <div class="game"> <div class="gameLine"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <div class="gameLine"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <div class="gameLine"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <div class="gameLine"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <div class="gameLine"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <div class="gameLine"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <div class="gameLine"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </div> </body> </html> |
есть проблема. я сделал подобное но сам. и у меня и у вас такая проблема: надо чтобы нельзя было кликать больше 1 раза а точнее чтобы это не фиксировалось.
|
Zombie_Killer,
смотрите пример снова. строка 66 |
Часовой пояс GMT +3, время: 01:15. |