Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Как добавить класс ко всем элементам span? (https://javascript.ru/forum/misc/70554-kak-dobavit-klass-ko-vsem-ehlementam-span.html)

Zombie_Killer 14.09.2017 19:41
Как добавить класс ко всем элементам 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>

рони 14.09.2017 20:16
Zombie_Killer,
прочтите документацию по jquery
$(function() {
$("span").addClass("test")
});

Zombie_Killer 14.09.2017 20:36
Цитата:
Сообщение от рони (Сообщение 464511)
Zombie_Killer,
прочтите документацию по jquery
$(function() {
$("span").addClass("test")
});
а вот мне еще надо чтобы при нажатии на любой span вызывалась функция. везде писать onclick="" не очень хорошо. не подскажите как сделать это из js

рони 14.09.2017 20:42
Zombie_Killer,
click

Zombie_Killer 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

рони 14.09.2017 20:54
Цитата:
Сообщение от Zombie_Killer
не подскажите что не так?
код рабочий, а что конкретно вам нужно, известно только вам.

рони 14.09.2017 21:19
Zombie_Killer,
$(function () {

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

});

рони 14.09.2017 23:35
Сундук сокровищ
 
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>

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

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


Часовой пояс GMT +3, время: 19:47.