Форум

Zombie_Killer · #1 (**permalink**) 14.09.2017, 19:41

Мне нужно добавить всем элементам 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>

рони · #2 (**permalink**) 14.09.2017, 20:16

Zombie_Killer,
прочтите документацию по jquery

$(function() {
$("span").addClass("test")
});

Zombie_Killer · #3 (**permalink**) 14.09.2017, 20:36

Сообщение от рони

Zombie_Killer,
прочтите документацию по jquery

$(function() {
$("span").addClass("test")
});

а вот мне еще надо чтобы при нажатии на любой span вызывалась функция. везде писать onclick="" не очень хорошо. не подскажите как сделать это из js

рони · #4 (**permalink**) 14.09.2017, 20:42

Zombie_Killer,
click

Zombie_Killer · #5 (**permalink**) 14.09.2017, 20:47

$('.xz').click(function () {
    if (this.id === "yes") {
        alert('You win!');
    } else {
        alert("You lose!");
    }
});

не подскажите что не так? я хочу чтобы при нажатии на элемент проверялся id и если его id будет yes то должно выводится сообщение you win а если его айди отсутствует то должно выводится you lose

рони · #6 (**permalink**) 14.09.2017, 20:54

Сообщение от Zombie_Killer

не подскажите что не так?

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

рони · #7 (**permalink**) 14.09.2017, 21:19

Zombie_Killer,

$(function () {

$("span").addClass("xz").click(function () {
    if (this.id === "yes") {
        alert('You win!');
    } else {
        alert("You lose!");
    }
});

});

рони · #8 (**permalink**) 14.09.2017, 23:35

Zombie_Killer,
Вам предстоит увлекательное путешествие по островам в поисках сундука сокровищ!!! Испытай свою удачу, отважный пират!!!

<!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>

Zombie_Killer · #9 (**permalink**) 15.09.2017, 19:25

есть проблема. я сделал подобное но сам. и у меня и у вас такая проблема: надо чтобы нельзя было кликать больше 1 раза а точнее чтобы это не фиксировалось.

рони · #10 (**permalink**) 15.09.2017, 19:33

Zombie_Killer,
смотрите пример снова. строка 66

Форум

Справочник

Discord чат

Курсы javascript