Question

处理HTML项目。

制作适用于我所寻找的JavaScript的问题：

单击按钮时，我希望::before css更改

和::after css也要改变。

再次单击该按钮时，将css恢复正常。

基本上看起来好像两边的灯都亮了，然后点击时另一个发光。

Example

＆＃13;

$('button').on('click', function(event) {
  if ($('.power::before').hasClass('on') == false) {
    $('.power::before').addClass('on');
    $(this).text('Small');
  } else {
    $('.power::before').removeClass('on');
    $(this).text('Big');
  }
});

＆＃13;

.power {
  position: absolute;
  width: 180px;
  height: 60px;
  right: 20px;
  bottom: 15px;
  border-radius: 4px;
  box-shadow: inset 2px 2px rgba(255, 255, 255, 0.1), inset -2px -2px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.2), 0 4px 10px rgba(0, 0, 0, 0.4);
  border: 2px #000 solid;
}

.power::before {
  content: " Standby ";
  position: absolute;
  font-family: Arial;
  font-size: 10px;
  color: #000;
  width: 5px;
  height: 5px;
  top: 38px;
  left: 100px;
  bottom: 30px;
  background: #a52a2a;
  border: 1px #111 solid;
  border-radius: 50%;
  line-height: 5px;
  text-indent: 12px;
  text-shadow: 0 1px #000;
}

.power::after {
  content: " Power ";
  position: absolute;
  font-family: Arial;
  font-size: 10px;
  color: #000;
  width: 5px;
  height: 5px;
  top: 18px;
  left: 100px;
  bottom: 30px;
  background: #7cfc00;
  box-shadow: 0 0 10px #7cfc00, 0 0 5px #7cfc00;
  border: 1px #7cfc00 solid;
  border-radius: 50%;
  line-height: 5px;
  text-indent: 12px;
  text-shadow: 0 1px #000;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="power">
  <button>button click</button>
</nav>

＆＃13;

Answer 1

您的问题源于对::before和::after的误解，即css伪元素。

Psuedo elements基本上就是你认为它们来自名称的东西，可以像常规元素一样被设计，但它实际上并不存在于DOM中。虽然::before和::after具有可能使其看起来更像常规DOM元素的content属性，但您需要记住它们是通过CSS创建和编辑的。

因此，当您尝试使用jQuery来定位伪元素时，它永远不会返回任何内容，因为它无法访问伪元素。 $('.power::before').hasClass('on')始终会返回false。

您需要做的是切换.power的类，然后在类存在时设置伪元素的样式。

var $pwr = $('.power');

$('button').on('click', function() {

  if (!$pwr.hasClass('on')) this.innerHTML = 'Turn Off';
  else this.innerHTML = 'Turn On';

  $pwr.toggleClass("on");
});

.power {
  position: absolute;
  width: 180px;
  height: 60px;
  right: 20px;
  bottom: 15px;
  border-radius: 4px;
  box-shadow: inset 2px 2px rgba(255, 255, 255, 0.1), inset -2px -2px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.2), 0 4px 10px rgba(0, 0, 0, 0.4);
  border: 2px #000 solid;
}

.power::before {
  content: " Standby ";
  position: absolute;
  font-family: Arial;
  font-size: 10px;
  color: #000;
  width: 5px;
  height: 5px;
  top: 38px;
  left: 100px;
  bottom: 30px;
  border: 1px #111 solid;
  border-radius: 50%;
  line-height: 5px;
  text-indent: 12px;
  text-shadow: 0 1px #000;
}

.power::after {
  content: " Power ";
  position: absolute;
  font-family: Arial;
  font-size: 10px;
  color: #000;
  width: 5px;
  height: 5px;
  top: 18px;
  left: 100px;
  bottom: 30px;
  border: 1px #111 solid;
  border-radius: 50%;
  line-height: 5px;
  text-indent: 12px;
  text-shadow: 0 1px #000;
}


/**
 If .on is set, add a background to the "Power" pseudo element
 */

.power.on:after {
  box-shadow: 0 0 10px #7cfc00, 0 0 5px #7cfc00;
  background: #7cfc00;
}


/**
 If .on is _not_ set, add a background to the "Standby" pseudo element
*/

.power:not(.on):before {
  box-shadow: 0 0 10px #a52a2a, 0 0 5px #a52a2a;
  background: #a52a2a;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="power">
  <button>Turn On</button>
</nav>

Answer 2

在您提供的代码中，我没有看到“on”类的任何CSS规则。

在分配类时，将其分配给目标元素，而不是psuedo类。 $('.power').addClass('on');

function test(el){
  el.classList.toggle("change");
}

#test::before,
#test::after{
  content: '';
  display: inline;
}
#test::before{ content: 'A '; }
#test::after{ content: ' B'; }
#test.change::before{ content: 'X '; }
#test.change::after{ content: ' Y'; }

<button id="test" onclick="test(this)">TEST</button>

另一个例子，使用原始代码（但稍微减少了CSS）

$('button').on('click', function(event) {
  if( $('.power').hasClass('on') ){
    $('.power').removeClass('on');
    $(this).text('BIG');
  } else {
    $('.power').addClass('on');
    $(this).text('small');
  }
});

.power {
  position: absolute;
  width: 180px;
  height: 60px;
  border: 2px #000 solid;
}
.power::before {
  content: " Standby ";
  display: inline;
}
.power::after {
  content: " Power ";
  display: inline;
}
.power.on::before{
  content: " >>> ";
}
.power.on::after{
  content: " <<< ";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="power">
  <button>button click</button>
</nav>

Answer 3

添加 html 以保留切换示例：

<div id='controller_box'>CSS CHANGE ON CLICK<br><br><div id='light_holder'></div></div>

在对象中保持样式：

box_styles = {
"background" : "steelblue",
"border-radius" : "3px",
"color" : "white",
"height" : "100px",
"width" : "200px",
"padding" : "10px",
"font-family" : "arial"
}

btn_styles = {
"background" : "white",
"width" : "70px",
"display" : "inline-block",
"border" : "none",
"border-radius" : "2px",
"font-size" : "16px",
"cursor" : "pointer"
}

lighthold_styles = {
"background" : "white",
"color" : "white",
"height" : "30px",
"width" : "70px",
"float" : "right",
"padding" : "10px"
}

red_styles = {
"border-radius" : "50%",
"width" : "20px",
"background" : "darkred",
"color" : "red",
"float" : "right",
"margin-right" : "10px",
"margin-top" : "30px"
}

green_styles = {
"border-radius" : "50%",
"width" : "20px",
"background" : "limegreen",
"color" : "limegreen",
"float" : "right",
"margin-right" : "-20px",
"margin-top" : "-10px",
"box-shadow" : "0 0 10px 10px limegreen",
"box-shadow" : "0 0 10px 10px limegreen",
"box-shadow" : "0 0 30px 20px limegreen"
}

on_red = {
"background" : "red",
"box-shadow" : "0 0 10px 10px red",
"box-shadow" : "0 0 10px 10px red",
"box-shadow" : "0 0 30px 20px red"
}
off_red = {
"background" : "darkred",
"box-shadow" : "0 0 0 0",
"box-shadow" : "0 0 0 0",
"box-shadow" : "0 0 0 0"
}

on_green = {
"background" : "limegreen",
"box-shadow" : "0 0 10px 10px limegreen",
"box-shadow" : "0 0 10px 10px limegreen",
"box-shadow" : "0 0 30px 20px limegreen"
}

off_green = {
"background" : "green",
"box-shadow" : "0 0 0 0",
"box-shadow" : "0 0 0 0",
"box-shadow" : "0 0 0 0"
}

根据需要添加内容和样式：

$('#controller_box').append("<button id='btn'>SMALL</button>").css(box_styles)
$('#btn').css(btn_styles)

$('#light_holder').append("<div id='red'>.</div><br><div id='green'>.</div>");

$('#red').css(red_styles)
$('#green').css(green_styles)

处理按钮：

btn_ct=0;
$('#btn').click(function() {
    btn_ct++;
    if((btn_ct % 2) == 0) { 
        $(this).text('SMALL')
        $('#green').css(on_green);
        $('#red').css(off_red);
    } else {
        $(this).text('BIG')
        $('#red').css(on_red);
        $('#green').css(off_green);
    }
    })

结果：

电源按钮（通过按钮点击更改CSS）

3 个答案: