¿Cómo usar las variables de JavaScript en los selectores jQuery?

160

¿Cómo uso las variables de JavaScript como parámetro en un selector 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"/>

Básicamente, lo que quiero hacer es poder ocultar el elemento que tiene un idnombre igual al elemento en el que se hace clic.

javascript jquery

— usuario225269
fuente

243

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

O puedes hacer algo como esto.

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

O también puedes dar algún efecto.

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

Si desea eliminar todo el elemento de forma permanente de la página.

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

También puedes usarlo en esto también.

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

— Vins
fuente

2

Es importante tener en cuenta que la variable utilizada para concatenar debe ser no numérica, así que haga toString () si id es un número.

— isync

A IE 11 no le gusta esto, $ ('#' + id) .hide () ;, dice que no está definido.

— Welshboy

55

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

Como está utilizando una identificación, esto funcionaría mejor

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

Recomiendo ser más específico con su enfoque para ocultar elementos mediante clics en los botones. Optaría por usar atributos de datos en su lugar. Por ejemplo

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

Luego, en tu 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]();
});

Ahora puede controlar por completo a qué elemento se dirige y qué le sucede a través del HTML. Por ejemplo, podría usar data-target=".some-class"y data-method="fadeOut"para desvanecer una colección de elementos.

— Phil
fuente

14

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

También funciona con ID:

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

cuando, (a veces)

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

no funciona, como debería .

Incluso puedes hacer ambas cosas:

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

— Alexx Roche
fuente

7

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

— Alex R.
fuente

5

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

— morgar
fuente

2

Plantilla de cadena ES6

Aquí hay una manera simple si no necesita soporte para IE / EDGE

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

o

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

Esta es una característica de es6 llamada cadena de plantilla

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

Expandir fragmento

Concatenación de cuerdas

Si necesita soporte para IE / EDGE, use

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

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

Expandir fragmento

Selector en DOM como atributo de datos

Esta es mi forma preferida, ya que hace que el código sea 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 fragmento 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" />

Expandir fragmento

— aWebDeveloper
fuente