Як використовувати змінні JavaScript у селекторах jQuery?

Як я можу використовувати змінні JavaScript як параметр у селекторі 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"/>

В основному те, що я хочу зробити, це вміти приховати елемент, який має значення, idщо дорівнює імені елемента, на який натискають.

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

АБО ви можете зробити щось подібне.

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

АБО ви також можете дати певний ефект.

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

Якщо ви хочете видалити весь елемент, назавжди сформуйте сторінку.

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

Ви також можете використовувати його і в цьому.

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

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

Оскільки ви використовуєте ідентифікатор, це буде краще

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

Я настійно рекомендую бути більш конкретним щодо вашого підходу до приховування елементів за допомогою натискання кнопки. Я б вирішив замість цього використовувати атрибути даних. Наприклад

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

Потім у вашому 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]();
});

Тепер ви можете повністю контролювати, на який елемент націлений, і що з ним відбувається за допомогою HTML. Наприклад, ви можете використовувати data-target=".some-class"і data-method="fadeOut"зникати колекції елементів.

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

Також працює з ID:

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

коли, (іноді)

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

не працює, як слід .

Ви навіть можете робити і те, і інше:

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

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

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

1. Шаблон рядка ES6

   Ось простий спосіб, якщо вам не потрібна підтримка IE / EDGE

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

   або

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

   Це функція es6, що називається шаблонною рядком

   Показати фрагмент коду

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

   Виконати фрагмент кодуСховати результати

   Розгорніть фрагмент

2. Об'єднання рядків

   Якщо вам потрібна підтримка IE / EDGE, використовуйте

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

   Показати фрагмент коду

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

   Виконати фрагмент кодуСховати результати

   Розгорніть фрагмент

3. Селектор у DOM як атрибут даних

   Це мій кращий спосіб, оскільки це робить вас код дійсно СУХОМО

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

   Показати фрагмент коду

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

   Виконати фрагмент кодуСховати результати

   Розгорніть фрагмент