Question

我要做的是在向按钮添加课程时更改按钮的内容。

我有一支笔，完全显示我的意思：

app.js

button.toggle {
  width: 80px;
  height: 25px;
  border-radius: 10%;
  background-color: #ff2356;

  &::before {
    content: "Click Me";
  }

  .clicked::before {
    content: "How dare you!";
  }
}

style.scss

<div class="container">
  <button class="toggle"></button>
</div>

的index.html

$response = ConvertTo-JSON @{
    Body="your file data";
    Headers=@{
        # unfortunately it seems functions does not support 'filename=...'
        'Content-Disposition'='attachment'; 
        # you would use application/octet-stream, but because it's converted to JSON you lose binary content
        'Content-Type'='text/plain';        
    };
}
Out-File -Encoding Ascii -FilePath $res -inputObject $response

这是一个显示我的意思的代码：http://codepen.io/khall47/pen/oBeOdY

我的期望：

按钮应该说＆＃34;你怎么敢！＆＃34;当点击＆＃39;班级出现在按钮上并且“点击我”按钮当点击＆＃39;班级缺席。

我得到了什么：

按钮显示＆＃39;点击我＆＃39;无论是否点击了＆＃39;已经添加了类。

我看过有关CSS-Tricks和MDN的文章，我还没有看到过这样的提及。我该怎么做才能做到这一点？

Answer 1

你的例子产生了这个;

button.toggle .clicked::before

但这就是你要找的东西;

button.toggle.clicked::before

你错过了＆符号

var button = document.querySelector('button');

button.addEventListener('click', toggleClickedClass);

function toggleClickedClass() {
  this.classList.toggle('clicked');
}

button.toggle {
  width: 80px;
  height: 25px;
  border-radius: 10%;
  background-color: #ff2356;
  &::before {
    content: "Click Me";
  }
  &.clicked::before {
    content: "How dare you!";
  }
}

<div class="container">
  <button class="toggle"></button>
</div>

如何根据通过JavaScript添加的类更改元素的:: before内容？

1 个答案: