13

以下は私のコードです。私が試したことです。このポップアップが表示されたら、この閉じるボタンを使用してポップボックス全体を閉じます。

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>

：after要素を選択したい。jqueryを使用してそれを行う方法は？

4

4 に答える 4

12

：after要素を選択したい。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

[前]Foo[後]
子DIV＃foo
子スクリプト

ライブコピー| ソース

ご覧のとおり、DOMに関する限り、生成された疑似要素はまったく存在しません。

于 2012-12-22T08:44:43.193 に答える
3

ほとんどの主要なブラウザー (IE9、IE10、Chrome、FF) でサポートされている getComputedStyle 関数を使用できます。ただし、IE8でこれを行う方法は見つかりませんでした。

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

この関数が定義されていない場合は、代わりに window.getComputedStyle を試してください。

于 2013-11-09T23:42:48.533 に答える
0

残念ながら、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");

そして、通常どおりクローズボックス画像を選択できます。

于 2012-12-22T08:47:08.500 に答える
0

jqueryを使用して閉じるボタンを追加し、それに閉じるイベントを割り当てることができます。このjqueryとcssはあなたのために働くでしょう。

CSS

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

Jクエリ

$(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");
}) ;

また、jqueryを介して追加するのではなく、html自体に画像を追加することをお勧めします

于 2012-12-22T10:02:40.933 に答える