Как использовать переменные javascript в селекторах jquery

Как использовать переменные javascript в качестве параметра в селекторе 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"/>


в основном то, что я хочу сделать, это иметь возможность скрыть элемент, который имеет идентификатор, равный имени элемента, который нажимается.

735   6  

6 ответов:

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

или вы можете сделать что-то подобное.

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

или вы можете дать некоторый эффект также.

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

если вы хотите удалить весь элемент навсегда сформировать страницу.

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

вы также можете использовать его в этом тоже.

$("#" + this.id).slideUp('slow', function (){
    $("#" + this.id).remove();
});
195  
2015-06-25 08:31:49 
$(`input[id="${this.name}"]`).hide();

как вы используете ID, это будет лучше

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

я настоятельно рекомендую быть более конкретным с вашим подходом к скрытию элементов с помощью нажатия кнопок. Я бы предпочел использовать вместо этого атрибуты данных. Например

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

тогда, в вашем 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]();
});

теперь вы можете полностью контролировать, какой элемент вы ориентируетесь и что происходит с ним через HTML. Например, вы можете использовать data-target=".some-class" и data-method="fadeOut" исчезать из коллекция элементов.

53  
2018-08-21 09:15:22 
$("input").click(function(){
        var name = $(this).attr("name");
        $('input[name="' + name + '"]').hide();    
    });

также работает с ID:

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

когда (иногда) 

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

не работает, как надо.

вы даже можете сделать так:

$('input[name="' + name + '"][id="' + id + '"]').hide();
12  
2012-09-18 12:59:32 
var x = $(this).attr("name");
$("#" + x).hide();
6  
2011-05-05 04:58:46

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

5  
2011-05-05 05:00:27

  1. шаблон строки ES6

    вот простой способ, Если вам не нужна поддержка IE / EDGE

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

    или

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

    это функция es6 называется строку шаблона

        (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. Конкатенация Строк

    Если вам нужна поддержка IE / EDGE используйте

    $("#" + $(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. селектор в DOM как атрибут данных

    это мой предпочтительный способ, как это делает вас код действительно сухой 

    // 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" />
2  
2016-03-27 14:33:11

Comments

    Ничего не найдено.
Click here to cancel reply.