Есть ли способ использовать селектор переменной CSS, который может выборочно применять элемент css к html, классы которого являются переменной? - PullRequest
Новая
       5

Есть ли способ использовать селектор переменной CSS, который может выборочно применять элемент css к html, классы которого являются переменной?

1 голос
/ 27 апреля 2020

У меня есть 3 диапазона, как показано ниже: 

<span  class = "testVar1" onClick = "testFunction(Var1)">
<span  class = "testVar2" onClick = "testFunction(Var2)">
<span  class = "testVar3" onClick = "testFunction(Var3)">
testFunction(var){
    here I assign class "on" to the span which calls this function
}

Если диапазон с классом testVar1 вызывает это, тогда он становится 

<span  class = "testVar1 on" onClick = "testFunction(Var1)"></span>

Мой Css такой, как показано ниже 

.test .on {
    some CSS
}

Есть ли способ в CSS, где я могу использовать переменную и применить css к тому диапазону, по которому щелкают? Как и 

.test[Var1 or Var2 or Var3] .on {
    some CSS
}

Я добился этого, используя несколько селекторов вручную, как # 

.testVar1 .on {
    some CSS
}
.testVar2 .on {
    some CSS
}

Я прочитал пост Использование регулярного выражения в css? , это полезно, но не отвечает на мой вопрос.

В этом посте css применяется ко всем элементам, но я хочу, чтобы css применялся только к элементу, который вызвал функцию. и т. д.

Любая помощь или указатели будут оценены! Спасибо!

Ответы [ 2 ]

2 голосов
/ 27 апреля 2020

Вы делаете вещи слишком сложными. Просто используйте один и тот же класс CSS на всех них, затем программно добавьте прослушиватель щелчков, а не встроенный onlick прослушиватель: 

document.querySelectorAll('span.test').forEach(
  span =>
  span.addEventListener('click', () => {
      console.log(`you clicked ${span.innerText}`) 
      span.classList.toggle('on')
  })
)
.test {
  background: red;
  color: white;
  display: inline-block;
  padding: 40px;
}

.test.on {
  background: green;
}
<span class="test">foo</span>
<span class="test">bar</span>
<span class="test">baz</span>

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

function foobar(span) {
  console.log(`you clicked ${span.innerText}`)
  span.classList.toggle('on')
}
.test {
  background: red;
  color: white;
  display: inline-block;
  padding: 40px;
}

.test.on {
  background: green;
}
<span class="test" onclick="foobar(this)">foo</span>
<span class="test" onclick="foobar(this)">bar</span>
<span class="test" onclick="foobar(this)">baz</span>
1 голос
/ 27 апреля 2020

Вы можете использовать селектор регулярных выражений: span[class^='test'], что означает выбор каждого диапазона с началом класса с «test». Вы можете комбинировать его с другим классом (.on), например: span[class^='test'].on

Что касается встроенного кода, вы можете сделать что-то подобное: 

const spans = document.querySelectorAll('span[class^="test"]'); // select all spans
for (var i=0; i < spans.length; i++) { // iterate them
  spans[i].addEventListener('click',function() { // add event listener to them
this.classList.add('on'); // set class on click
  });
}
span[class^='test'] {color: blue;}
span[class^='test'].on { color: red;  }
<span class="testVar1">1</span>
<span class="testVar2">2</span>
<span class="testVar3">3</span>

Проверьте этот для выбора элемента с более чем одним классом. И это для селектора regExp. Наслаждайтесь кодом!

...