如何在 jQuery 选择器中使用 JavaScript 变量？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5891840/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use JavaScript variables in jQuery selectors?
提问by user225269
How do I use JavaScript variables as a parameter in a jQuery selector?
如何在 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"/>
Basically what I want to do is to be able to hide the element which has an idthat is equal to the name of the element that is being clicked.
基本上我想要做的是能够隐藏元素id的名称等于被点击的元素的名称。
回答by Vins
var name = this.name;
$("input[name=" + name + "]").hide();
OR you can do something like this.
或者你可以做这样的事情。
var id = this.id;
$('#' + id).hide();
OR you can give some effect also.
或者你也可以产生一些效果。
$("#" + this.id).slideUp();
If you want to remove the entire element permanently form the page.
如果要从页面中永久删除整个元素。
$("#" + this.id).remove();
You can also use it in this also.
您也可以在此使用它。
$("#" + this.id).slideUp('slow', function (){
$("#" + this.id).remove();
});
回答by Phil
$(`input[id="${this.name}"]`).hide();
As you're using an ID, this would perform better
当您使用 ID 时，这会表现得更好
$(`#${this.name}`).hide();
I highly recommend being more specific with your approach to hiding elements via button clicks. I would opt for using data-attributes instead. For example
我强烈建议您通过单击按钮来更具体地隐藏元素。我会选择使用数据属性来代替。例如
<input id="bx" type="text">
<button type="button" data-target="#bx" data-method="hide">Hide some input</button>
Then, in your JavaScript
然后，在你的 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]();
});
Now you can completely control which element you're targeting and what happens to it via the HTML. For example, you could use data-target=".some-class"and data-method="fadeOut"to fade-out a collection of elements.
现在，您可以通过 HTML 完全控制要定位的元素以及对它执行的操作。例如，您可以使用data-target=".some-class"和data-method="fadeOut"淡出一组元素。
回答by Alexx Roche
$("input").click(function(){
var name = $(this).attr("name");
$('input[name="' + name + '"]').hide();
});
Also works with ID:
也适用于 ID：
var id = $(this).attr("id");
$('input[id="' + id + '"]').hide();
when, (sometimes)
当，（有时）
$('input#' + id).hide();
does not work, as it should.
不工作，因为它应该。
You can even do both:
您甚至可以同时执行以下两项操作：
$('input[name="' + name + '"][id="' + id + '"]').hide();
回答by Alex R.
var x = $(this).attr("name");
$("#" + x).hide();
回答by morgar
$("#" + $(this).attr("name")).hide();
$("#" + $(this).attr("name")).hide();
回答by aWebDeveloper
ES6 String Template
Here is a simple way if you don't need IE/EDGE support
$(`input[id=${x}]`).hide();or
$(`input[id=${$(this).attr("name")}]`).hide();This is a es6 feature called template string
(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" />
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" />
String Concatenation
If you need IE/EDGE support 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" />
字符串连接
如果您需要 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" />
Selector in DOM as data attribute
This is my preferred way as it makes you code really 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" />
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" />
