web-dev-qa-db-fra.com

Masquage du bouton dans JQuery à l'aide de .prop (hidden: true)

J'essaie de comprendre comment masquer un bouton avec JQuery à l'aide de la méthode .prop (hidden: true). Pour une raison quelconque, dans Chrome lorsque je définis cette valeur et affiche le code HTML, le bouton a un élément masqué, mais le bouton est toujours visible.

Des idées?

javascriptjquerygoogle-chromebutton
12
2scottish

Un bouton n'a pas de propriété cachée?

$('button').hide();

ou

$('button').toggle(true);  //shows button
$('button').toggle(false); //hides button
26
adeneo

Vous ne pouvez pas cacher un bouton en utilisant la fonction .prop() de jQuery, vous devez utiliser soit .hide() or .fadeOut() ou vous pouvez essayer avec la méthode .css():

en utilisant .css():

$('input[submit]').css('display','none');

en utilisant fadeOut():

$('input[submit]').fadeOut();

en utilisant .hide():

$('input[submit]').hide();
2
Jai

Vous pouvez utiliser définir le style display sur none. Par exemple,

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

Ou, .hide() pour la brièveté,

$("#button").hide()

Il y a aussi visibility et opacity mais ces deux-là peuvent ne pas générer l'effet souhaité. 

2
Alexander

Votre syntaxe est incorrecte, mais il n'y a pas de propriété "cachée" de toute façon. Vous voulez probablement:

$('#your_button').hide();

ou éventuellement

$('#your_button').addClass('hidden');

si vous avez une classe "cachée" dans votre CSS.

La partie incorrecte de votre syntaxe est que les paramètres de votre appel de fonction ne sont pas correctement exprimés. Définir une propriété devrait ressembler à ceci:

$("#your_button").prop("name", "value");
1
Pointy

jQuery.prop est destiné aux attributs HTML uniquement , éléments définis sur le nœud DOM. Les styles CSS ne sont pas applicables, mais hidden n'existe pas, alors que href ou class est applicable. Au lieu de cela, vous devez utiliser $(el).css('display', 'none') ou $(el).hide().

1
Robert K

Vous pouvez utiliser un opérateur ternary et la méthode css() pour accomplir la même chose: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

$("#button").css("display", (mycondition) ? "block" : "none");
0
NuclearPeon

Ce que vous avez décrit est en fait correct si vous utilisez jquery parallèlement à bootstrap4. 

il suffit de faire ce qui suit: $element.prop('hidden', true);

Si aucun bootstrap 4 n'est disponible, cela fonctionne toujours pour le navigateur moderne.

0
Curious Sam

Si vous voulez utiliser un accessoire, alors

$("#my_button").prop("style").display="none"

J'irais sans doute. (retour à la base)

document.getElementById("mybutton").style.display = "none";
0
allenhwkim

prop () est une fonction de lecture: http://api.jquery.com/prop/ je suggère d'utiliser hide: http://api.jquery.com/hide/

0
darshanags