Question

我需要这个按钮：

<div class="myButton" id="clearBefore">Click Me</div>

将伪类“：before”中的'content'更改为'text'。

CSS

.ms-ChoiceField-input:before{    content:'Old content'; }

/*after button click content changes*/
.ms-ChoiceField-input:before{    content:'New Content'; }

HTML

<div class="checkboxHiddenSelectContainer" data-toggle="filterList" style="display: block;">
     <div class="ms-ChoiceField">
        <input class="ms-ChoiceField-input">
        <label class="ms-ChoiceField-field"">
           :before
           <span class="ms-Label">Function</span>
           :after
        </label>
     </div>
    </div>

Answer 1

HTML：

   <div class="checkboxHiddenSelectContainer" data-toggle="filterList" style="display: block;">
     <div class="ms-ChoiceField">
        <input class="ms-ChoiceField-input">
        <label class="ms-ChoiceField-field"">
           :before
           <span class="ms-Label content1">Function</span>
           :after
        </label>
     </div>
    </div>

CSS：

.content1:before {
content:'Old content'; 
}

.content2:before {
content: 'New content';
}

JS：

$('#clearBefore').click(function() {
  $('.ms-Label').removeClass('content1').addClass('content2');
  // if wanna toggle content
  // $('.ms-Label').toggleClass('content1').toggleClass('content2');
})

Answer 2

您似乎在HTML中使用了伪类，它不应该具有伪类的效果。你应该在你的CSS中使用它们：

.ms-Label:before {
  content: "I am before";
}

就切换而言，如果我理解正确，您可以通过向标签添加课程toggle并将之前的选择器更改为.ms-Label.toggled:before来实现这一目标

在Jquery

CSS

HTML

2 个答案: