jQuery và ẩn nấp: sau /: trước pseudo lớp

Question

thể trùng lặp:
jQuery and pseudo-classes

tôi đã cố gắng che giấu: sau giờ học giả qua jQuery trong một số cách nhưng không thành công , Tôi đã tìm thấy một giải pháp khác bằng cách thêm một loại div trống trong div của tôi chứa nội dung: sau khi nội dung và sau đó ẩn div hoàn toàn để nó mang lại hiệu quả tương tự.

Tuy nhiên tôi chỉ tò mò nếu có ai đó tìm cách che giấu: sau hoặc: trước nội dung. Đây là những gì tôi đã thử mà không làm việc.

$('.search_box:after').hide(); 
$('.search_box:after').css('display', 'none'); 

Chỉ cần để cung cấp cho bạn những bối cảnh, tôi có một div có chứa các hình thức tìm kiếm vv, và khi tìm kiếm đang hoạt động Tôi muốn kích hoạt một chỉ mũi tên nhỏ dưới div trỏ như vào danh sách các vật phẩm tìm thấy (được xây dựng với: sau khi thông qua CSS) và khi không có gì được tìm thấy, hoặc nó mặc định vào danh sách đầy đủ (kể từ khi không có gì được tìm thấy) sau đó tôi muốn ẩn nó.

Answer 1

Bạn không thể thực hiện việc này. Đặt cược tốt nhất của bạn là sử dụng một lớp trên phần tử để chuyển đổi hiển thị phần tử giả.

<style> 
    .search_box:after { 
     content: 'foo'; 
    } 
    .search_box.hidden:after { 
     display: none; 
    } 
</style> 
<script> 
    //Instead of these 2 lines 
    //$('.search_box:after').hide(); 
    //$('.search_box:after').css('display', 'none'); 

    //Use 
    $('.search_box').addClass('hidden'); 
</script> 

Sống dụ-http://jsfiddle.net/4nbnh/

Answer 2

Bạn có thể tự động thêm khối <style> để ghi đè lên. Cung cấp cho nó id và bạn có thể xóa nó khi cần.

Demo: http://jsfiddle.net/ThinkingStiff/TRLY2/

Script:

$('#hello').click(function() { 

    if($('#pseudo').length) { 
     $('#pseudo').remove(); 
    } else { 
     var css = '<style id="pseudo">#hello::after{display: none !important;}</style>'; 
     document.head.insertAdjacentHTML('beforeEnd', css); 
    }; 

}); 

HTML:

<div id="hello">hello</div>​ 

CSS:

#hello::after { 
    content: "goodbye";   
}​ 

Answer 3

ThinkingStiff có một ý tưởng khá tốt.

Bạn cũng có thể thêm và xóa lớp học cho hộp tìm kiếm của mình và chỉ sử dụng thẻ sau với điều đó.

Giống như .hide:after { display:none } và .show:after { /* normal css */ }. Sau đó, chỉ cần trao đổi các lớp học với javascript.

chỉnh sửa: trộn các tên