Bagaimana saya bisa mengubah tidak ada tampilan CSS atau memblokir properti menggunakan jQuery?

429

Bagaimana saya bisa mengubah tidak ada tampilan CSS atau memblokir properti menggunakan jQuery?

jquery jquery-selectors DEVOPS
sumber

Jawaban:

923

Cara yang benar untuk melakukan ini adalah dengan menggunakan showdan hide:

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

Cara alternatif adalah dengan menggunakan metode jQuery css :

$("#id").css("display", "none");
$("#id").css("display", "block");
djdd87
sumber
@GenericTypeTea: #iddigunakan untuk id bagaimana jika saya ingin menggunakan class?
AabinGunz
26
$(".class").css("display", "none");
djdd87
8
Saya mencoba menggunakan $('#id').css('display', 'none');, tetapi tidak berhasil. Namun, menggunakan $('#id').css('color', 'red');itu berfungsi. Saya tidak yakin mengapa. Adakah yang punya ide? Terima kasih sebelumnya.
David
5
Anda juga perlu memasukkan perbedaan antara $ ('# id'). Hide () dan $ ("# id"). Css ("display", "none") dalam jawaban ini.
ManirajSS
1
Ada perbedaan antara keduanya, di mana fungsi sebelumnya menyembunyikan teks saja dan tidak membebaskan ruang yang ditempati oleh elemen sedangkan yang kedua menyembunyikan konten dan membebaskan ruang yang ditempati oleh elemen cocern
Dila Gurung
110

Ada beberapa cara untuk mencapai ini, masing-masing dengan tujuannya sendiri.

1. ) Untuk menggunakan inline sementara hanya menetapkan elemen daftar hal yang harus dilakukan

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

2. ) Untuk digunakan saat mengatur beberapa properti CSS

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

3. ) Untuk secara dinamis memanggil perintah

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

4. ) Untuk secara dinamis beralih antara blok dan tidak ada, jika itu adalah div

  • beberapa elemen ditampilkan sebagai inline, inline-block, atau meja, tergantung pada Ta g N ama

$ ('# ele_id'). toggle ();

SpYk3HH
sumber
27

Jika tampilan div diblokir secara default, Anda bisa menggunakan .show()dan .hide(), atau bahkan lebih sederhana, .toggle()untuk beralih di antara visibilitas.

reko_t
sumber
Benar, itu akan mengatur tampilan apa pun awalnya, yang bisa menjadi blok atau sesuatu yang berbeda.
danielgwood
9

Untuk sembunyikan:

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

Untuk pertunjukan:

$("#id").css("display", "");
Phanikumar Jatavallabhula
sumber
6

Cara lain untuk melakukannya menggunakan metode jQuery CSS:

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

Cara sederhana:

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

)}
pengguna3726824
sumber
Penjelasan akan diurutkan.
Peter Mortensen
2 
(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);
Pham
sumber
Penjelasan akan diurutkan.
Peter Mortensen
2

Jika Anda ingin menyembunyikan dan menampilkan elemen, tergantung pada apakah itu sudah terlihat atau tidak, Anda bisa menggunakan toggle sebagai ganti .hide()dan.show()

$('elem').toggle();
Vladimir verleg
sumber
1

.hide () tidak berfungsi di Chrome untuk saya.

Ini berfungsi untuk bersembunyi:

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

Dalam kasus saya, saya melakukan show / hide elemen dari suatu bentuk sesuai dengan apakah elemen input kosong atau tidak, sehingga ketika menyembunyikan elemen-elemen, elemen yang mengikuti elemen tersembunyi diposisikan kembali menempati ruangnya, maka perlu dilakukan float: left dari unsur elemen tersebut. Bahkan menggunakan plugin sebagai dependOn, perlu menggunakan float.

pengguna2341112
sumber
0

Gunakan ini:

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

Atau:

$("#id").(":display").val("none");
Trikaldarshi
sumber
saya punya masalah tidak bekerja untuk saya :(.<style> #choosepath { display: none; } </style> <script> $(document).ready(function () { $('#btn_journey').click(function () { alert("button click"); $('#choosepath').css({"display":"normal"}); }); }); </script> </head> <body> <a href="#" class="btn btn-primary btn-lg" id="btn_journey">Start your journey</a> <div class="col-lg-3 col-md-6 mb-4" id="choosepath"> </div> </body></html>
jaibalaji
0

Menggunakan:

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

Yang ini adalah cara terbaik.

Saeed Ahmed
sumber