Como usar variáveis javascript em seletores jquery



title javascript (5)

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.


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


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


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

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

OU você pode fazer algo assim.

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

OU você pode dar algum efeito também.

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

Se você quiser remover todo o elemento permanentemente formar a página.

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

Você também pode usá-lo também.

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

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

Como você está usando um ID, isso funcionaria melhor

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

Eu recomendo ser mais específico com sua abordagem para ocultar elementos através de cliques de botão. Eu optaria por usar atributos de dados. Por exemplo

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

Então, no seu 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]();
});

Agora você pode controlar completamente o elemento que está segmentando e o que acontece com ele por meio do HTML. Por exemplo, você poderia usar data-target=".some-class" e data-method="fadeOut" para reduzir uma coleção de elementos.





jquery