javascript - llamar variables jquery

Cómo usar variables de JavaScript en jquery selectores

Question

¿Cómo uso las variables de javascript como un 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 id que es igual al nombre del elemento que se está haciendo clic.

Answer 1

1. Plantilla de cadena ES6

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

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

   o

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

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

       (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. Concatenación de cadenas

   Si necesita soporte IE / EDGE use

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

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

Answer 2

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

Answer 3

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

Answer 4

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

O puedes hacer algo como esto.

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

O puedes dar algún efecto también.

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

Si desea eliminar el elemento completo 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();
});

Answer 5

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

Answer 6

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

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

$("#" + x).hide();

Recomiendo ser más específico con su enfoque para ocultar elementos mediante clics de botón. 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 completamente a qué elemento se dirige y qué le sucede a través del HTML. Por ejemplo, puede usar data-target=".some-class" data-method="fadeOut" data-target=".some-class" y data-method="fadeOut" para data-method="fadeOut" una colección de elementos.