¿Cómo utilizar variables de JavaScript en selectores de jQuery?

Resuelto user225269 asked hace 13 años • 6 respuestas

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

user225269 avatar May 05 '11 08:05 user225269
Aceptado
var name = this.name;
$("input[name=" + name + "]").hide();

O puedes hacer algo como esto.

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

O también puedes darle algún efecto.

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

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

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

También puedes usarlo en esto también.

$("#" + this.id).slideUp('slow', function (){
    $("#" + this.id).remove();
});
Vinayak Phal avatar May 05 '2011 02:05 Vinayak Phal
$(`input[id="${this.name}"]`).hide();

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

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

Recomiendo encarecidamente ser más específico con su enfoque para ocultar elementos mediante clics en botones. Yo optaría por utilizar 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 puedes controlar completamente a qué elemento te diriges y qué le sucede a través del HTML. Por ejemplo, podría utilizar data-target=".some-class"y data-method="fadeOut"para atenuar una colección de elementos.

Phil avatar May 05 '2011 01:05 Phil
$("input").click(function(){
        var name = $(this).attr("name");
        $('input[name="' + name + '"]').hide();    
    });   

También funciona con identificación:

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 avatar Sep 18 '2012 07:09 Alexx Roche
var x = $(this).attr("name");
$("#" + x).hide();
Alex R. avatar May 05 '2011 01:05 Alex R.