cách chọn: sau khi sử dụng phần tử jquery

Dưới đây là mã của tôi. Tôi đã thử khi nào cửa sổ bật lên này xuất hiện, tôi muốn sử dụng nút đóng này để đóng toàn bộ cửa sổ bật lên.cách chọn: sau khi sử dụng phần tử jquery

mã 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>

Tôi muốn chọn: sau khi các yếu tố .Làm thế nào để làm điều đó bằng jquery?

Nguồn

2012-12-22 xman

jQuery (và tất nhiên javascript nói chung) không hỗ trợ các lớp CSS giả ': after' và': before'. – adeneo

hoặc có cách nào để chọn hình ảnh hộp thư đó bằng cách sử dụng jquery không? – xman

Tôi muốn chọn: sau phần tử .how để làm điều đó bằng cách sử dụng jquery?

Bạn không thể, các phần tử giả tạo không tồn tại trong DOM (tuy nhiên, thật đáng buồn).

Chúng ta có thể chứng minh điều này như sau:

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); 

})();

Các trang kết quả từ nêu trên (nếu chúng tôi giả định script yếu tố được thêm vào body ở cuối) là:

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

Live Copy | Source

Như bạn có thể thấy, các phần tử giả được tạo ra chỉ không có mặt ở mức nào mà DOM liên quan.

Nguồn

2012-12-22 08:44:43

hoặc có cách nào để chọn hình ảnh hộp thư đó bằng jquery không? – xman

@xman: Nếu bằng cách "chọn" bạn có nghĩa là có được một tham chiếu đến nó để bạn có thể làm mọi thứ với nó, không, phần tử chỉ không tồn tại ở cấp JavaScript chút nào. Nếu bạn muốn ảnh hưởng đến hình ảnh, bạn phải tự động tạo CSS cho bộ chọn '.bigdiv: after' (hoặc, tất nhiên, một cái cụ thể hơn) và thêm nó vào trang. –

ok cảm ơn. :) Tôi sẽ tạo ra mà không cần sử dụng sau .thanks – xman

Thật không may, bạn không thể chọn các phần tử giả trong jQuery (hoặc JavaScript nói chung).

Phương thức appendTo() của jQuery hoạt động chính xác như CSS :after mặc dù, do đó, nó có thể hoạt động như một giải pháp thay thế (mặc dù không thanh lịch như CSS tinh khiết).

ví dụ như thay vì:

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

Hãy thử nó như

CSS này:

.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");

Và sau đó bạn có thể chọn hình ảnh closebox như bình thường.

Nguồn

2012-12-22 08:47:08 mikel

hoặc là có bất kỳ cách nào để chọn hình ảnh closebox bằng cách sử dụng jquery? – xman

Tôi đã cập nhật bài đăng của mình bằng ví dụ – mikel

có sự cố khi tôi mở hộp bật lên 2,3 lần hình ảnh đó gắn thêm vào hộp bật lên theo chiều dọc. Cách tôi dừng lại? – xman

bạn có thể sử dụng jquery để nối thêm nút đóng và có thể gán một sự kiện gần với nó. jquery và css này sẽ làm việc cho bạn.

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

tôi cũng sẽ đề nghị bạn thêm hình ảnh về bản thân html thay vì thêm nó trough jquery

Nguồn

2012-12-22 10:02:40

Bạn có thể sử dụng getComputedStyle chức năng, được hỗ trợ bởi hầu hết các trình duyệt chính - IE9, IE10, Chrome, FF. Tôi đã không tìm thấy một cách để làm điều này trong IE8 mặc dù.

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

Nếu bạn thấy chức năng này không được xác định, hãy thử window.getComputedStyle thay thế.

Nguồn

2013-11-09 23:42:48 Chris

cách chọn: sau khi sử dụng phần tử jquery

Trả lời

Các vấn đề liên quan