jQuery选择伪元素::after

12

我想选中伪元素:after

这是我的CSS代码:

show-more:after
{
    content : (" > ");
}

JQuery 代码

$(function(){
    $('.show-more:after').click(function() {
        alert("Yes");
    }); 
});

1
无法做到。伪元素不在 DOM 中,因此无法被 JS 选中。 - Paulie_D
请问如何在CSS伪元素(如:before或:after)上添加事件监听器?此外,这个问题也可以在https://dev59.com/cGox5IYBdhLWcg3wJxL4找到。 - benbrunton
4个回答

14

由于伪元素不是DOM的一部分,因此无法直接绑定到伪元素,但可以通过绑定到父元素并测试与:after作用的元素相关的偏移量来近似实现所需效果:

下面的代码会渲染为ELEMENT++,其中单击"ELEMENT"和"++"各触发不同的行为:

<span>ELEMENT</span>
span::after {
  content: '++';
  position: absolute;
}

span.c1 {
  background: yellow;
}

span.c2::after {
  background: orange;
}
const span = document.querySelector('span');

span.addEventListener('click', function (e) {
    if (e.offsetX > span.offsetWidth) {
        span.className = 'c2';
    } else {
        span.className = 'c1';
    }
});

交互式展示:http://jsfiddle.net/wC2p7/1/


7

编辑,已更新

尝试

(function($) {
  jQuery.fn.extend({
    getPseudo: function(pseudo, prop) {
      var props = window.getComputedStyle(
        $(this).get(0), pseudo
      ).getPropertyValue(prop);
      return String(props);
    },
    setPseudo: function(_pseudo, _prop, newprop) {
      var elem = $(this);
      var s = $("style");
      var p = elem.getPseudo(_pseudo, _prop);
      var r = p !== "" ? new RegExp(p) : false;
      var selector = $.map(elem, function(val, key) {
        return [val.tagName
                , val.id 
                  ? "#" + val.id : null
                , val.className ? "." + val.className : null]
      });
      var _setProp = "\n" + selector.join("")
        .toLowerCase()
        .concat(_pseudo)
        .concat("{")
        .concat(_prop + ":")
        .concat(newprop + "};");
      return ((!!r ? r.test($(s).text()) : r) 
              ? $(s).text(function(index, prop) {
                  return prop.replace(r, newprop)
                }) 
              : $(s).append(_setProp)
      );
    }
  })
})(jQuery);

例如,初始的css:
.show-more:after {
    content : ' > ';
}

设置pseudo伪元素

$(".show-more-after").on("click", function() {
  $(this).setPseudo(":after", "content", "'123'")
})

github pseudo.js

(function($) {
  jQuery.fn.extend({
    getPseudo: function(pseudo, prop) {
      var props = window.getComputedStyle(
        $(this).get(0), pseudo
      ).getPropertyValue(prop);
      return String(props);
    },
    setPseudo: function(_pseudo, _prop, newprop) {
      var elem = $(this);
      var s = $("style");
      var p = elem.getPseudo(_pseudo, _prop);
      var r = p !== "" ? new RegExp(p) : false;
      var selector = $.map(elem, function(val, key) {
        return [val.tagName
                , val.id 
                  ? "#" + val.id : null
                , val.className ? "." + val.className : null]
      });
      var _setProp = "\n" + selector.join("")
        .toLowerCase()
        .concat(_pseudo)
        .concat("{")
        .concat(_prop + ":")
        .concat(newprop + "};");
      return ((!!r ? r.test($(s).text()) : r) 
              ? $(s).text(function(index, prop) {
                  return prop.replace(r, newprop)
                }) 
              : $(s).append(_setProp)
      );
    }
  })
})(jQuery);

$(".show-more-after").on("click", function() {
  $(this).setPseudo(":after", "content", "'123'");
})
.show-more-after:after {
    content : ' > ';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="show-more-after">click</div>


它只能使用一个伪元素,例如.one:before,但不能使用两个伪元素,例如.one:hover:before。例如,它可以使用$(this).setPseudo(":after", "content", "'123'");,但是相同的代码不能用于$(this).setPseudo(":hover:after", "content", "'123'");。 - Chirag Shah

4
请这样做:

$(function(){
    $('.show-more').after().click(function() {
        alert("Yes");
    }); 
});
.show-more {
Width: 100px;
Height: 40px;
Position: relative; /* Helps you define the area you want to be clickable */
Overflow: hidden;
}


.show-more:after {
 content: 'Click me';
Left:0;
Top: 0;
width: 100%;
height: 100%;
background: red;
color: white;
padding: 15px;
line-height: 40px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="show-more"> </div>


1
如果你将HTML更改为<div class="show-more">INSIDE</div>,然后点击“INSIDE”,它会出现问题。你的代码无法区分对元素和伪元素的点击。 - Stephen Ostermiller
1
它实际上是通过点击任何部分的 .show-more 类来工作的,不仅仅是针对 ::after - Thamaraiselvam
1
使用相对定位属性设置固定的宽度和高度可以解决“任何部分”触发点击事件的问题。请参见jsfiddle。 - Sleek Geek

0

使用此代码在“显示更多”后添加文本

$(function(){
    $('.show-more').text($('.show-more').text()+">");
});

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接