variable - title javascript




Como usar variáveis javascript em seletores jquery (4)

Como eu uso as variáveis ​​javascript como um parâmetro em um seletor 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"/>

Basicamente o que eu quero fazer é ser capaz de esconder o elemento que tem id igual ao nome do elemento que está sendo clicado.


  1. Modelo de Cadeia ES6

    Aqui está uma maneira simples se você não precisa do suporte do IE / EDGE

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

    ou

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

    Este é um recurso es6 chamado string de modelo

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

  1. Concatenação de Cordas

    Se você precisar de suporte ao 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" />
    
     

  1. Seletor no DOM como atributo de dados

    Esta é a minha maneira preferida, pois faz com que você codifique realmente DRY

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


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


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

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

Também trabalha com ID:

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

quando (às vezes)

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

não funciona, como deveria .

Você pode até fazer as duas coisas:

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




jquery