使用 jquery 从背景图像中删除 ::before CSS

Question

我想删除 :before 背景图片。

php文件，

    <li class="vi">
    <a href="javascript:;">
<span class="play-btn"></span><img src="/v1.jpg" data-video="https://www.youtube.com/embed/Nxj8BWiyypQ?rel=0&amp;showinfo=0&amp;autoplay=1" class="videoGPoster"> 
    </a>
    <h5>Videos 2</h5>
    </li>

CSS，

    .home_gallery .gallery_wheel .recent_photpvideo ul li.vi:before {
        position: absolute;
        top: 30%;
        width: 120px;
        height: 120px;
        content: "";
        background: url(images/play.png);
        background-size: cover;
        left: 30%;
        transform: translate(0%,0%);

.play-btn {
    position: absolute;
    top: 30%;
    width: 120px;
    height: 120px;
    content: "";
    background: url(images/play.png);
    background-size: cover;
    left: 30%;
    transform: translate(0%,0%);
    z-index: 1;
}

JS 文件，

jQuery('img.videoGPoster').click(function () {
    video = '<iframe width="400" height="300" src="' + jQuery(this).attr('data-video') + '" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>';
    jQuery(this).replaceWith(video);
});

我用过这段代码，但它不起作用，

jQuery('.play-btn').click(function () {
    alert();

    video = '<iframe width="400" height="300" src="' + jQuery(this).attr('data-video') + '" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>';

    jQuery(this).replaceWith(video);
});

图片是 => https://prnt.sc/idkci7

我想点击图像按钮然后播放视频然后播放按钮不显示但现在播放按钮显示。请任何人帮助如何使用jquery删除：之前的播放按钮。 => https://prnt.sc/idkeop

Answer 1

你不能用 jQuery 选择伪选择器，所以你不能直接修改它的行为。但是使用 jQuery，您可以向 DOM 元素添加一个类或删除一个类，例如 li 在这种情况下。然后你就可以对它使用 CSS 属性了。

jQuery('img.videoGPoster').click(function () {
    video = '<iframe width="400" height="300" src="' + jQuery(this).attr('data-video') + '" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>';
    
    jQuery(this).parents("li.vi").addClass("playing");
    jQuery(this).replaceWith(video);
});

li.vi {
 position: relative;
}

li.vi:before {
    position: absolute;
    top: 30%;
    width: 120px;
    height: 120px;
    content: "";
    background: url(http://img.jetbitts.com/android/thumbs/ico/0/google-play-android.jpg);
    background-size: cover;
    left: 30%;
    transform: translate(0%,0%);
}

li.vi.playing:before {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<li class="vi">
   <a href="javascript:;"><img src="https://cdn.pixabay.com/photo/2017/10/13/04/13/scenery-2846777_960_720.jpg" data-video="https://www.youtube.com/embed/Nxj8BWiyypQ?rel=0&amp;showinfo=0&amp;autoplay=1" class="videoGPoster"> 
   </a>
   <h5>Videos 2</h5>
</li>

<li class="vi">
   <a href="javascript:;"><img src="https://cdn.pixabay.com/photo/2017/10/13/04/13/scenery-2846777_960_720.jpg" data-video="https://www.youtube.com/embed/Nxj8BWiyypQ?rel=0&amp;showinfo=0&amp;autoplay=1" class="videoGPoster"> 
   </a>
   <h5>Videos 2</h5>
</li>

Answer 2

您不能直接使用jQuery 删除Pseudo-elements，但您可以在某个class 上设置:before，然后使用jQuery 删除此类

jQuery('img.videoGPoster').click(function() {
  video = '<iframe width="400" height="300" src="' + jQuery(this).attr('data-video') + '" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>';
  jQuery(this).replaceWith(video);
  jQuery('.vi').removeClass('bg');
});

li.bg:before {
  position: absolute;
  top: 30%;
  width: 120px;
  height: 120px;
  content: "";
  background: url(images/play.png);
  background-size: cover;
  left: 30%;
  transform: translate(0%, 0%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="vi bg">
  <a href="javascript:;"><img src="/v1.jpg" data-video="https://www.youtube.com/embed/Nxj8BWiyypQ?rel=0&amp;showinfo=0&amp;autoplay=1" class="videoGPoster">
  </a>
  <h5>Videos 2</h5>
</li>