Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Добавление второго стиля к элементу (https://javascript.ru/forum/jquery/73415-dobavlenie-vtorogo-stilya-k-ehlementu.html)

Retro_1477 14.04.2018 09:24
Добавление второго стиля к элементу
 
У меня есть элемент, я присвоил к нему один стиль, после чего мне нужно добавить ещё один.
for (var i = 0; i < DUCK1_COUNT; i++) {
        $(".menu").after("<img src='img/004-duck.png' class='utka plav'>");
        $(".utka").addClass('Krykvi1'+i);
        $('.Krykvi1'+i).css('transform', 'translate(' + getRandomIn(0, 1500) + 'px, ' + getRandomIn(0, 800) + 'px)');
        if (getRandomIn(3, 6) < 5) {
            $('.Krykvi1'+i).addClass('duck-flip');
            }     
  }


Где начинается оператор if, там присваивается новый класс. Но после присвоения этого НОВОГО класса свойства предыдущего стираются, то есть transform translate убирается и на его место встают свойства класса duck-flip.
Как добавить класс или стиль элементу второй раз?

рони 14.04.2018 09:50
Retro_1477,
а так?
for (var i = 0; i < DUCK1_COUNT; i++) {
        var DUCK = $("<img src='img/004-duck.png' class='utka plav'>")
        .insertAfter(".menu")
        .addClass('Krykvi1'+i)
        .css('transform', 'translate(' + getRandomIn(0, 1500) + 'px, ' + getRandomIn(0, 800) + 'px)');
        if (getRandomIn(3, 6) < 5) {
            DUCK.addClass('duck-flip');
            }
  }

Retro_1477 14.04.2018 10:08
Хорошая попытка, но результат тот же.
Он добавляет класс, но почему-то transform translate блокирует transform scaleX(который в классе duck-flip). Если я убираю translate то scaleX работает.

рони 14.04.2018 10:14
Цитата:
Сообщение от Retro_1477
но почему-то transform translate блокирует transform scaleX(который в классе duck-flip).
так устроено, что style имеет приоритет над class, это азбука!!!

рони 14.04.2018 10:17
Retro_1477,
думал у вас проблема с размножением классов
<img src="img/004-duck.png" class="utka plav Krykvi10 duck-flip Krykvi11 Krykvi12 Krykvi13 Krykvi14" style="transform: translate(4px, 4px);">

код выше убирает это.

Retro_1477 14.04.2018 10:20
Я избавился от размножения классов во таким образом
for (var i = 0; i < DUCK1_COUNT; i++) {
        $(".menu").after("<img src='img/004-duck.png' class='utka plav'>");
        $(".utka").addClass('Krykvi1'+i);
        $('.Krykvi1'+i).css('transform', 'translate(' + getRandomIn(0, 1500) + 'px, ' + getRandomIn(0, 800) + 'px)');
        if (getRandomIn(3, 6) < 5) {
            $('.Krykvi1'+i).addClass('duck-flip');
            }
        $( "img" ).removeClass( "utka");
        
  }


Так что с этим всё нормально))

Retro_1477 14.04.2018 10:21
И как поступить?:blink:

рони 14.04.2018 10:28
Retro_1477,
как-то так
for (var i = 0; i < DUCK1_COUNT; i++) {
        var DUCK = $("<img src='img/004-duck.png' class='utka plav'>").insertAfter(".menu")
        .addClass('Krykvi1'+i);
        var transform = 'translate(' + getRandomIn(0, 1500) + 'px, ' + getRandomIn(0, 800) + 'px)'
         if (getRandomIn(3, 6) < 5) {
           transform = "?????"
            }
        DUCK.css('transform', transform);
  }

Retro_1477 14.04.2018 10:50
Крч, смотри, у меня происходит спаун уток, в рандомной местах и некоторые из них должны быть повёрнуты на scaleX(-1) воооот

рони 14.04.2018 10:52
Retro_1477,
и в чём проблема?

рони 14.04.2018 10:55
Retro_1477,
for (var i = 0; i < DUCK1_COUNT; i++) {
        var DUCK = $("<img src='img/004-duck.png' class='utka plav'>").insertAfter(".menu")
        .addClass('Krykvi1'+i);
        var transform = 'translate(' + getRandomIn(0, 1500) + 'px, ' + getRandomIn(0, 800) + 'px)'
         if (getRandomIn(3, 6) < 5) {
           transform += " scaleX(-1)"
            }
        DUCK.css('transform', transform);
  }

Retro_1477 14.04.2018 11:17
Спасибо большое!:thanks: :thanks: :thanks: :thanks: :thanks:

рони 14.04.2018 11:17
Retro_1477,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
function getRandomIn(a,b)
{
   return a + Math.random()*(b-a)|0
}

    var DUCK1_COUNT = 5;
for (var i = 0; i < DUCK1_COUNT; i++) {
        var DUCK = $("<img src='http://krasnodar.meatinfo.ru/data/tradeboard/116303/tradeboardUsKIoT_pre.jpg' class='utka plav'>").insertAfter(".menu")
        .addClass('Krykvi1'+i);
        var transform = 'translate(' + getRandomIn(0, 100) + 'px, ' + getRandomIn(0, 400) + 'px)'
         if (getRandomIn(3, 6) < 5) {
           transform += " scaleX(-1)"
            }
        DUCK.css('transform', transform);
  }

});
  </script>
</head>

<body>
<div class="menu"></div>

</body>
</html>

Retro_1477 14.04.2018 11:19
Всё работает))


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