Динамически добавлять атрибут к классу css вместо элемента - PullRequest
Новая
       6

Динамически добавлять атрибут к классу css вместо элемента

0 голосов
/ 24 апреля 2020

Недавно я столкнулся с этим сценарием, в котором я хотел добавить свойство css к классу вместо элемента .

Когда я делаю это 

    $('.class_with_css').css({display:'none'});

Это добавит стиль "display:none" ко всем элементам, которые в настоящее время имеют класс "class_with_css". Но в моем случае я должен был применить класс "class_with_css" к новому элементу после выполнения приведенного выше кода и хочу сохранить это дополнение стиля. Есть ли способ сделать это (что-то вроде добавления свойства к самому классу css), не вызывая вышеуказанную функцию?

Например.

  1. два элемента 
    <div id=1 class="abc" ></div>
    <div id=2 class="abc" ></div>
Запустите код 
    $('.abc').css({display:'none'});
Элемент становится: 
    <div id=1 class="abc" style="display: none;"  ></div>
    <div id=2 class="abc" style="display: none;" ></div>
Теперь я добавляю класс ab c к такому элементу 
    <div id=3 class="abc" ></div>

Есть ли способ сделать класс "ab c" для хранения стиля вместо элемента, чтобы этот шаг Элемент 4 также имеет display:none

Ответы [ 2 ]

0 голосов
/ 24 апреля 2020

Вы можете добавить стиль в свой заголовок.

НО ПОМНИТЬ С этого момента. Вы должны использовать display: block;, чтобы показать это. В противном случае стиль по умолчанию будет display: none;, пока вы не обновите sh страницу.

Inject () вводит стиль в ваш заголовок

Add () добавляет «ab c» класс к вашим другим элементам div

Showme () добавляет «display: block» в «.ab c»

Hideme () добавляет «display: none» в «.ab c "

function Inject(){
  $('head').append('<style type="text/css">.abc {display: none;}</style>');
}
function Add() {
  $("#w").addClass("abc");
  $("#z").addClass("abc");
}
function Showme() {
 $(".abc").css("display","block");
}
function Hideme() {
 $(".abc").css("display","none");
}
button {
border: 0;
padding: 1% 3%;
background-color: lightgray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="x" class="abc">x</div>
<div id="y" class="abc">y</div>
<div id="w">w</div>
<div id="z">z</div>
<p>First Click below and see how w and z are not hiding</p>
<button onclick="Inject()">Click to inject style to head</button>
<p>Second click below and add "abc" class to w and z.</p>
<button onclick="Add()">Click to add abc to w and z</button>
<p>Then click below to add style="display:block;"</p>
<button onclick="Showme()">Click to show anything with class "abc"</button>
<p>Then click below to add style="display:none;"</p>
<button onclick="Hideme()">Click to hide anything with class "abc"</button>
0 голосов
/ 24 апреля 2020

Нет, нет способа достичь того, чего вы хотите напрямую. Как обычно это делается, уже имея класс css с желаемыми изменениями / свойствами и применяя этот класс вместо свойства css.

Итак, у вас будет, например: 

.hide {
    display: none
}

и добавьте класс к элементам: 

$('.abc').addClass('hide');

ОБНОВЛЕНИЕ
Другим вариантом, если вы действительно хотите динамически добавить css класс, будет ответ, отправленный здесь

...