JQuery kullanarak CSS görüntüleme yok veya özelliğini nasıl engelleyebilirim?

JQuery kullanarak CSS görüntüleme yok veya özelliğini nasıl engelleyebilirim?

Bunu yapmanın doğru yolu kullanmaktır showve hide:

$('#id').hide();
$('#id').show();

Alternatif bir yol, jQuery css yöntemini kullanmaktır :

$("#id").css("display", "none");
$("#id").css("display", "block");

Bunu başarmanın birkaç yolu vardır, her birinin kendi amacı vardır.

1. ) Bir öğeye basitçe yapılacaklar listesini atarken satır içi kullanmak için

$('#ele_id').css('display', 'block').animate(....
$('#ele_id').css('display', 'none').animate(....

2. ) Birden çok CSS özelliği ayarlarken kullanmak için

$('#ele_id').css({
    display: 'none'
    height: 100px,
    width: 100px
});
$('#ele_id').css({
    display: 'block'
    height: 100px,
    width: 100px
});

3. ) Komutu dinamik olarak çağırmak için

$('#ele_id').show();
$('#ele_id').hide();

4. ) Div ise, blok ile hiçbiri arasında dinamik olarak geçiş yapmak için

• bazı öğeler Ta g N ame'ye bağlı olarak satır içi, satır içi blok veya tablo olarak görüntülenir

$ ( '# Ele_id') geçiş ().;

Div'ın görünümü varsayılan olarak engelleniyorsa, görünürlük arasında geçiş yapmak için yalnızca .show()ve .hide()daha da basit kullanabilirsiniz .toggle().

Gizlemek için:

$("#id").css("display", "none");

Şov için:

$("#id").css("display", "");

JQuery CSS yöntemini kullanarak yapmanın diğer yolu:

$("#id").css({display: "none"});
$("#id").css({display: "block"});

Basit yol:

function displayChange(){
$(content_id).click(function(){
  $(elem_id).toggle();}

)}

(function($){
    $.fn.displayChange = function(fn){
        $this = $(this);
        var state = {};
        state.old = $this.css('display');
        var intervalID = setInterval(function(){
            if( $this.css('display') != state.old ){
                state.change = $this.css('display');
                fn(state);
                state.old = $this.css('display');
            }
        }, 100);        
    }

    $(function(){
        var tag = $('#content');
        tag.displayChange(function(obj){
            console.log(obj);
        });  
    })   
})(jQuery);

Bir öğeyi gizlemek ve göstermek istiyorsanız, zaten görünür olup olmamasına bağlı olarak, .hide()ve yerine değiştirme özelliğini kullanabilirsiniz..show()

$('elem').toggle();

.hide () benim için Chrome'da çalışmıyor.

Bu gizlemek için çalışır:

var pctDOM = jQuery("#vr-preview-progress-content")[0];
pctDOM.hidden = true;

Benim durumumda, bir giriş öğesinin boş olup olmadığına göre bir formun öğelerini göster / gizle yapıyordum, böylece öğeleri gizlerken, gizli olanları takip eden öğe, alanını işgal ederek yeniden konumlandırıldı: bir şamandıra yapmak gerekiyordu: sol böyle bir elementin elementi. Bağlı olarak bir eklenti kullanmak bile şamandıra kullanmak gerekiyordu.

Bunu kullan:

$("#id").(":display").val("block");

Veya:

$("#id").(":display").val("none");

kullanın:

$(#id/.class).show()
$(#id/.class).hide()

Bu en iyi yol.