Как использовать переменные JavaScript в селекторах jQuery?

160

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

user225269
источник

Ответы:

243
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();
});
Vins
источник
2
Важно отметить, что переменная, используемая для конкатенации, должна быть не числовой, поэтому делайте toString (), если id является числом.
isync
IE 11 не нравится это, $ ('#' + id) .hide () ;, он говорит, что это не определено.
валлиец
55
$(`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"для постепенного исчезновения коллекции элементов.

Фил
источник
14
$("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();
Алекс Рош
источник
7
var x = $(this).attr("name");
$("#" + x).hide();
Алекс Р.
источник
2
  1. Шаблон строки ES6

    Вот простой способ, если вам не нужна поддержка IE / EDGE

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

    или

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

    Это функция es6, называемая шаблоном


  1. Конкатенация строк

    Если вам нужна поддержка IE / EDGE, используйте

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


  1. Селектор в 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();

aWebDeveloper
источник