[javascript] How to use JavaScript variables in jQuery selectors?

How do I use JavaScript variables as a parameter in a jQuery selector?

<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"/>

Basically what I want to do is to be able to hide the element which has an id that is equal to the name of the element that is being clicked.

1. ES6 String Template

   Here is a simple way if you don't need IE/EDGE support

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

   or

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

   This is a es6 feature called template string

   _x000D_

   _x000D_

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

   _x000D_

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

   _x000D_

   _x000D_
   _x000D_

2. String Concatenation

   If you need IE/EDGE support use

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

   _x000D_

   _x000D_

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

   _x000D_

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

   _x000D_

   _x000D_
   _x000D_

3. Selector in DOM as data attribute

   This is my preferred way as it makes you code really DRY

   // 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();
   

   _x000D_

   _x000D_

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

   _x000D_

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

   _x000D_

   _x000D_
   _x000D_

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

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

Also works with ID:

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

when, (sometimes)

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

does not work, as it should.

You can even do both:

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

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

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

As you're using an ID, this would perform better

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

I highly recommend being more specific with your approach to hiding elements via button clicks. I would opt for using data-attributes instead. For example

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

Then, in your 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]();
});

Now you can completely control which element you're targeting and what happens to it via the HTML. For example, you could use data-target=".some-class" and data-method="fadeOut" to fade-out a collection of elements.