我想选中伪元素:after
这是我的CSS代码:
show-more:after
{
content : (" > ");
}
JQuery
代码
$(function(){
$('.show-more:after').click(function() {
alert("Yes");
});
});
我想选中伪元素:after
这是我的CSS代码:
show-more:after
{
content : (" > ");
}
JQuery
代码
$(function(){
$('.show-more:after').click(function() {
alert("Yes");
});
});
由于伪元素不是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';
}
});
编辑,已更新
尝试
(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>
$(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>
<div class="show-more">INSIDE</div>
,然后点击“INSIDE”,它会出现问题。你的代码无法区分对元素和伪元素的点击。 - Stephen Ostermiller.show-more
类来工作的,不仅仅是针对 ::after
。 - Thamaraiselvam使用此代码在“显示更多”后添加文本
$(function(){
$('.show-more').text($('.show-more').text()+">");
});