jquery在单击时显示伪元素[重复]答案

【问题标题】：jquery show psuedo element on click [duplicate]jquery在单击时显示伪元素[重复]
【发布时间】：2018-11-28 11:57:43
【问题描述】：

我在这里要做的是我有一个列表，每个列表项都有伪元素:before，最初伪元素将设置为display:none，但是当单击我想要的列表项时要显示放置在该项目之前的伪元素，我该怎么做？

这是我尝试过的。

$('.lab-list li').on('click', function() {
  $(this: before).css({
    "display": "block"
  });
});

.lab-list li {
  list-style: none;
}

.lab-list li:hover {
  cursor: pointer;
}

.lab-list li:before {
  content: "\2708";
  padding-left: 20px;
  padding-right: 20px;
  display: none;
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<ul class="lab-list">
  <li>Stockholm</li>
  <li>Delhi</li>
  <li>Zurich</li>
  <li>Newyork</li>
  <li>South hampton</li>
  <li>Manila</li>
  <li>Singapore</li>
</ul>

【问题讨论】：

伪元素不能被 JS 选择，因为它们不在 DOM 中。将类应用到伪父级并使用 CSS。
检查stackoverflow.com/questions/38872290/how-to-get-pseudo-element
还有 - stackoverflow.com/questions/5041494/…

标签： jquery html css

【解决方案1】：

你可以给元素添加一个类来显示伪元素：

$('.lab-list li').on('click', function() {
  $(this).toggleClass('show-before');
});

.lab-list li {
  list-style: none;
}

.lab-list li:hover {
  cursor: pointer;
}

.lab-list li:before {
  content: "\2708";
  padding-left: 20px;
  padding-right: 20px;
  display: none;
}

/* add this */
.lab-list .show-before:before {
  display:block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="lab-list">
  <li>Stockholm</li>
  <li>Delhi</li>
  <li>Zurich</li>
  <li>Newyork</li>
  <li>South hampton</li>
  <li>Manila</li>
  <li>Singapore</li>
</ul>

【讨论】：