Como usar variáveis ​​JavaScript em seletores jQuery?

Como uso variáveis ​​JavaScript como parâmetro em um seletor 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"/>

Basicamente, o que eu quero fazer é poder ocultar o elemento idque é igual ao nome do elemento que está sendo clicado.

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

OU você pode fazer algo assim.

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

OU você pode dar algum efeito também.

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

Se você deseja remover todo o elemento permanentemente, forme a página.

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

Você também pode usá-lo nisso também.

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

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

Como você está usando um ID, isso teria um desempenho melhor

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

Eu recomendo ser mais específico com sua abordagem para ocultar elementos por meio de cliques em botões. Eu preferiria usar atributos de dados. Por exemplo

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

Então, no seu 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]();
});

Agora você pode controlar completamente qual elemento está segmentando e o que acontece com ele através do HTML. Por exemplo, você pode usar data-target=".some-class"e data-method="fadeOut"desvanecer uma coleção de elementos.

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

Também funciona com o ID:

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

quando (às vezes)

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

não funciona, como deveria .

Você pode até fazer as duas coisas:

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

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

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

1. ES6 String Template

   Aqui está uma maneira simples, se você não precisar de suporte do IE / EDGE

   $(`input[id=${x}]`).hide();

   ou

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

   Este é um recurso es6 chamado string de modelo

   Mostrar snippet de código

       (function($) {
           $("input[type=button]").click(function() {
               var x = $(this).attr("name");
               $(`input[id=${x}]`).toggle(); //use hide instead of toggle
           });
       })(jQuery);

       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
       <input type="text" id="bx" />
       <input type="button" name="bx" value="1" />
       <input type="text" id="by" />
       <input type="button" name="by" value="2" />
   
    

   Executar snippet de códigoOcultar resultados

   Expandir snippet

2. Concatenação de String

   Se você precisar de suporte do IE / EDGE, use

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

   Mostrar snippet de código

       (function($) {
           $("input[type=button]").click(function() {
               $("#" + $(this).attr("name")).toggle(); //use hide instead of toggle
           });
       })(jQuery);

       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
       <input type="text" id="bx" />
       <input type="button" name="bx" value="1" />
       <input type="text" id="by" />
       <input type="button" name="by" value="2" />
   
    

   Executar snippet de códigoOcultar resultados

   Expandir snippet

3. Seletor no DOM como atributo de dados

   Esta é a minha maneira preferida, pois faz com que você codifique realmente SECO

   // HTML
   <input type="text"   id="bx" />
   <input type="button" data-input-sel="#bx" value="1" class="js-hide-onclick"/>
   
   //JS
   $($(this).data("input-sel")).hide();

   Mostrar snippet de código

       (function($) {
           $(".js-hide-onclick").click(function() {
               $($(this).data("input-sel")).toggle(); //use hide instead of toggle
           });
       })(jQuery);

       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
       <input type="text" id="bx" />
       <input type="button" data-input-sel="#bx" value="1" class="js-hide-onclick" />
       <input type="text" id="by" />
       <input type="button" data-input-sel="#by" value="2" class="js-hide-onclick" />
   
    

   Executar snippet de códigoOcultar resultados

   Expandir snippet