Question

我有几个元素，我想在它们被点击时将一个类添加到它们的伪元素之前。目前我已将类添加到元素中，但我无法确定如何将侦听器附加到元素并将类添加到伪元素。

这是我的HTML：

<div class="locked-item"></div>

SCSS：

.locked-item{
  &:before {
    content: '';
    background-image: url(../../images/lock.svg);
    background-position: center center;
    background-size: cover;
    background-size: 37%;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  background-color: @brand-green;
  transition: all .2s;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 100%;
  left: 0;
}

使用Javascript：

setTimeout(function() {

    var lockItems = document.getElementsByClassName('locked-item');

    for (var i = 0; i < lockItems.length; i++) {
      lockItems[i].addEventListener('click',handleClick,false);
    }

}, 100);

function handleClick(){
    addClass(this, 'jiggle-click');
    setTimeout(function() { 
        removeClass(this, 'jiggle-click');
    }.bind(this), 820);
}


function hasClass(el, className) {
  if (el.classList)
    return el.classList.contains(className)
  else
    return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'))
}

function addClass(el, className) {
  if (el.classList)
    el.classList.add(className)
  else if (!hasClass(el, className)) el.className += " " + className
}

function removeClass(el, className) {
  if (el.classList)
    el.classList.remove(className)
  else if (hasClass(el, className)) {
    var reg = new RegExp('(\\s|^)' + className + '(\\s|$)')
    el.className=el.className.replace(reg, ' ')
  }
}

Answer 1

你做不到。如果伪元素具有内容（从CSS给出），则仅呈现伪元素。您可以设置样式，但不能向其添加事件处理程序或以其他方式从Javascript处理它。这也意味着你不能给他们上课。

但是，您可以像已经想到的那样向（父）元素添加类。该类不需要对元素本身产生任何影响，只能用于为其包含的peudo元素设置样式。

如何将类添加到psuedo-element

1 个答案: