Как использовать переменные 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, который совпадает с именем элемента, по которому щелкают.

Ответы

Ответ 1

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

Ответ 2

$('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" data-target=".some-class" и data-method="fadeOut" для постепенного уменьшения набора элементов.

Ответ 3

$("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();

Ответ 4

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

Ответ 5

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

Ответ 6

Шаблон ES6 String

Вот простой способ, если вам не нужна поддержка 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" />

Ответ 7

вам нужно добавить переменную как строку в тег селектора. Это случай

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