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

如何在 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等于被点击的元素的名称。

430306 次浏览
小开 
$(`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"淡出元素集合。

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

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

小开
最佳答案 
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();
});
小开 
$("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();
小开

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


提交答案