如何在 jQuery 选择器中使用 JavaScript 变量？答案

【问题标题】：How to use JavaScript variables in jQuery selectors?如何在 jQuery 选择器中使用 JavaScript 变量？
【发布时间】：2011-08-19 00:13:12
【问题描述】：

如何在 jQuery 选择器中使用 JavaScript 变量作为参数？

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

基本上我想要做的是能够隐藏具有id 的元素，该元素等于被单击的元素的名称。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

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();
});

【讨论】：

需要注意的是，用于连接的变量必须是非数字的，如果 id 是数字，toString() 也是如此。
IE 11 不喜欢这个，$('#' + id).hide();，它说它是未定义的。
美丽。你被加入书签了！
非常漂亮，谢谢

【解决方案2】：

$(`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" 淡出一组元素。

【讨论】：

【解决方案3】：

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

不起作用，as it should。

你甚至可以两者兼得：

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

ES6 字符串模板

如果您不需要 IE/EDGE 支持，这里有一个简单的方法

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

或

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

这是一个名为 template string 的 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" />

字符串连接

如果您需要 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" />

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

【讨论】：