如何选择：元素使用jQuery后

贝娄是我的代码。我试过了什么。当这个弹出窗口出现时，我想用这个关闭按钮来关闭整个popbox。如何选择：元素使用jQuery后

CSS代码

.bigdiv{ 
    display:none; 
    background-color:#efefef; 
    box-shadow: 10px 10px 10px 100000px rgba(0, 0, 0, 0.4); 
    border:2px solid #efefef; 
    width:400px; 
    height:300px; 
    position:fixed; 
    z-index:500; 
    top:25%; 
    left:25%; 
    margin:0 auto; 
    padding:20px; 
    } 
    .bigdiv:after { 
     cursor:pointer; 
     content:url('http://static.doers.lk/img/closebox.png'); 
     position: relative; 
     right: -195px; 
     top: -310px; 
     z-index: 999; 
    }

JQUERY

$(".left div").click(function() { 

    $(".bigdiv").show("slow"); 


    $(".bigdiv").click(function() { 
    $(".bigdiv").hide(); 
    }) ; }) ;

HTML

<div class="left"> 
<div>intro text here</div><div></div><div></div> 
</div> 


<div class="bigdiv">some content</div>

我想选择：后要素。如何是使用jQuery做什么？

来源

2012-12-22 xman

jQuery（当然，一般情况下，JavaScript）不支持CSS伪类'：after'和'：before'。 – adeneo

还是有什么办法来选择使用jQuery的那个闭箱图片吗？ – xman

我想选择：元素后。如何使用jQuery来做到这一点？

你不能，生成的伪元素不存在于DOM中（可悲的是）。

我们可以像这样证明了这一点：

CSS：

#foo:before { 
    content: '[Before]' 
} 
#foo:after { 
    content: '[After]' 
}

HTML：

<body><div id="foo">Foo</div></body>

的JavaScript：

(function() { 

    var msgs = []; 
    var child; 
    var div; 

    for (child = document.body.firstChild; 
     child; 
     child = child.nextSibling) { 
    if (child.id) { 
     msgs.push("Child " + child.nodeName + "#" + child.id); 
    } 
    else { 
     msgs.push("Child " + child.nodeName); 
    } 
    } 

    div = document.createElement('div'); 
    div.innerHTML = msgs.join("<br>"); 
    document.body.appendChild(div); 

})();

从上面产生的页面（如我们假设script元件在端部被添加到body）为：

[Before]Foo[After] 
Child DIV#foo 
Child SCRIPT

Live Copy | Source

正如您所看到的，就DOM而言，生成的伪元素根本不存在。

来源

2012-12-22 08:44:43

还是有没有办法使用jquery选择那个关闭盒图片？ – xman

@xman：如果通过“选择”你的意思是获得一个引用，所以你可以做到这一点，不，该元素根本不存在于JavaScript级别。如果你想影响图像，你必须为'.bigdiv：after'选择器（或者当然，更具体的选择器）动态生成CSS并将其添加到页面中。 –

好的谢谢。:)我打算在不使用.thanks – xman

不幸的是，你不能在jQuery（或一般的JavaScript）中选择伪元素。

jQuery的appendTo()方法的工作原理完全一样CSS :after的，所以它可能是一个更换工作（虽然不那么优雅的纯CSS解决方案）。

例如，而不是：

.bigdiv:after { 
    cursor:pointer; 
    content:url('http://static.doers.lk/img/closebox.png'); 
    position: relative; 
    right: -195px; 
    top: -310px; 
    z-index: 999; 
}

尝试像这样

CSS：

.bigdivAfter { 
    cursor:pointer; 
    position: relative; 
    right: -195px; 
    top: -310px; 
    z-index: 999; 
}

JS：

$("<div class=bigdivAfter><img src='http://static.doers.lk/img/closebox.png'></div>").appendTo(".bigdiv");

然后你就可以选择closebox形象正常。

来源

2012-12-22 08:47:08 mikel

之后创建，或者有什么方法可以使用jquery选择那个closebox图像吗？ – xman

我用示例更新了我的帖子 – mikel

有一个问题，我打开弹出框2,3倍图像附加到垂直流行框。如何停止？ – xman

您可以使用jquery追加关闭按钮，并可以为其分配关闭事件。这jQuery和CSS将为你工作。

CSS

.bigdivAfter { 
    cursor:pointer; 
    position: absolute; 
    right: //as you want; 
    top: //as you want; 
    z-index: 999; 
}

JQUERY

$(document).ready(function(){ 
$(".bigdiv").append('<img class="closeButton" src="http://static.doers.lk/img/closebox.png"/>'); 
$(".bigdiv .closeButton").click(function() { 
    $(".bigdiv").hide(); 
    }) ; 
$(".left div").click(function() { 
    $(".bigdiv").show("slow"); 
}) ;

我还会建议您在HTML自身添加图像，而不是将它添加的低谷jQuery的

来源

2012-12-22 10:02:40

可以使用的getComputedStyle功能，这是大多数主流浏览器支持的 - IE9，IE10，Chrome，FF。虽然我还没有找到在IE8中这样做的方法。

var attrContent = getComputedStyle(this,':after').content; 
var attrWidth = getComputedStyle(this,':after').width;

如果您发现该功能是不确定的尝试window.getComputedStyle代替。

来源

2013-11-09 23:42:48 Chris

如何选择：元素使用jQuery后

回答

相关问题