Как я могу заменить содержимое класса CSS? - PullRequest
Новая
       21

Как я могу заменить содержимое класса CSS?

4 голосов
/ 23 апреля 2019

У меня есть код, в котором есть место, заполненное квадратами, а внутри него - цветной квадрат, перемещающийся каждую секунду, у этого квадрата есть класс CSS для его цвета, поэтому он на самом деле не перемещается, просто добавляет новый класс к <span> и удаляет его через секунду.

У меня есть функция, в которой я хочу изменить цвет квадрата, который будет работать следующим образом: changeColor({R:50,G:200,B:50,A:1})

Я пытался заставить это работать, но у меня есть эта проблема:

  • Поскольку у меня есть функция добавления и удаления класса квадратного цвета, я не могу изменить имя класса CSS, оно должно быть таким же, иначе приложение не будет работать.

  • Если я использую .css("background", "rgba(" + R + "," + G + "," + B + "," + A + ")");, это добавляет цвет к текущему <span> навсегда.

  • Мне не удается заставить работать .attr(), может быть, я делаю это неправильно.

Я пытался использовать .css, .removeClass, .addClass и .attr

Ничего не сработало, возможно я не правильно его использую. 

function changeColor(sqColor) {

    R = sqColor.R;
    G = sqColor.G;
    B = sqColor.B;
    A = sqColor.A;

    $($("#container .sq_bullet a.sq_current > span")[0]).css("background", "rgba(" + R + "," + G + "," + B + "," + A + ")");

}

(это a.sq_current, потому что "span" находится внутри "a")

Полный код слишком длинный, чтобы его опубликовать, извините, воспринимайте его как действительно большое количество <span>, в котором ничего нет, только атрибуты css.

Итак, цель состоит в том, чтобы изменить класс CSS: 

#container .sq_bullet a.sq_current > span {
    background: rgba(255,106,0,1);
}

к тому, что я ввел в функцию, например: changeColor({R:50,G:200,B:50,A:0.8})

1 Ответ

0 голосов
/ 23 апреля 2019

Этого можно достичь, записав встроенный элемент в заголовок, а затем динамически добавив к нему стили.Затем вы можете добавить / удалить класс в span и независимо обновить стили в элементе без необходимости записывать какие-либо встроенные стили в span.

Вот пример (это может быть улучшено много, я простоповторно использовал мой предыдущий пример и подправил его, чтобы продемонстрировать, что я имею в виду): 

var element = $("#container .sq_bullet a.sq_current > span").eq(0);

function changeColor(sqColor) {
  R = sqColor.R;
  G = sqColor.G;
  B = sqColor.B;
  A = sqColor.A;
  
  if (!$('myStyles').length) {
    $('head').append('<style id="myStyles" type="text/css"></style>');
  }
  var newStyle = ".myClass { background: rgba(" + R + "," + G + "," + B + "," + A + ");}";
  $('#myStyles').html(newStyle);
}

element.addClass('myClass');
changeColor({R:50,G:200,B:50,A:0.8});

setTimeout(function() {
  element.removeClass('myClass');
}, 2000);

setTimeout(function() {
  element.addClass('myClass');
  changeColor({R:200,G:50,B:50,A:0.8});
}, 4000);
.myClass {
  border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div class="sq_bullet">
    <a class="sq_current">
      <span>Span</span>
      <span>Span</span>
      <span>Span</span>
    </a>
  </div>
</div>

Обратите внимание, что в этом примере создается встроенный блок стиля с фоном .myClass, установленным в зеленый цвет.Затем он добавляет класс в диапазон, через две секунды он удаляет класс, затем через две секунды он меняет цвет фона на красный и снова добавляет класс - и все это без записи каких-либо встроенных стилей в сам диапазон.

...