Comment utiliser les variables JavaScript dans les sélecteurs jQuery ?

Question

Comment utiliser des variables JavaScript comme paramètre dans un sélecteur jQuery ?

<script type="text/javascript">
$(function(){    
  $("input").click(function(){
    var x = $(this).attr("name");

    $("input[id=x]").hide();    
  });    
});
</script>

<input type="text" id="bx"/><input type="button" name="bx"/>
<input type="text" id="by"/><input type="button" name="by"/>

En fait, ce que je veux faire, c'est de pouvoir masquer l'élément qui a une icône id qui est égal au nom de l'élément sur lequel on clique.

Answer 1

var name = this.name;
$("input[name=" + name + "]").hide();

OU vous pouvez faire quelque chose comme ça.

var id = this.id;
$('#' + id).hide();

OU vous pouvez aussi donner un effet.

$("#" + this.id).slideUp();

Si vous voulez supprimer définitivement l'élément entier de la page.

$("#" + this.id).remove();

Vous pouvez également l'utiliser dans ce cas.

$("#" + this.id).slideUp('slow', function (){
    $("#" + this.id).remove();
});

Answer 2

$(`input[id="${this.name}"]`).hide();

Comme vous utilisez un ID, ceci serait plus performant

$(`#${this.name}`).hide();

---

Je vous recommande vivement d'être plus précis dans votre approche du masquage des éléments par les clics de bouton. J'opterais plutôt pour l'utilisation des attributs de données. Par exemple

<input id="bx" type="text">
<button type="button" data-target="#bx" data-method="hide">Hide some input</button>

Ensuite, dans votre JavaScript

// using event delegation so no need to wrap it in .ready()
$(document).on('click', 'button[data-target]', function() {
    var $this = $(this),
        target = $($this.data('target')),
        method = $this.data('method') || 'hide';
    target[method]();
});

Vous pouvez désormais contrôler complètement l'élément que vous ciblez et ce qui lui arrive via le HTML. Par exemple, vous pouvez utiliser data-target=".some-class" y data-method="fadeOut" pour faire disparaître une collection d'éléments.

Answer 3

$("input").click(function(){
        var name = $(this).attr("name");
        $('input[name="' + name + '"]').hide();    
    });   

Fonctionne également avec ID :

var id = $(this).attr("id");
$('input[id="' + id + '"]').hide();

quand, (parfois)

$('input#' + id).hide();

ne fonctionne pas, comme il se doit .

Vous pouvez même faire les deux :

$('input[name="' + name + '"][id="' + id + '"]').hide();

Answer 4

var x = $(this).attr("name");
$("#" + x).hide();

Answer 5

$("#" + $(this).attr("name")).hide();