[英]How to use JavaScript variables in jQuery selectors?
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 id
that is equal to the name of the element that is being clicked.基本上我想要做的是能够隐藏id
等于被单击元素名称的元素。
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();
});
$(`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.现在,您可以通过 HTML 完全控制您要定位的元素以及它会发生什么。 For example, you could use data-target=".some-class"
and data-method="fadeOut"
to fade-out a collection of elements.例如,您可以使用data-target=".some-class"
和data-method="fadeOut"
淡出一组元素。
$("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();
var x = $(this).attr("name");
$("#" + x).hide();
$("#" + $(this).attr("name")).hide();
ES6 String Template ES6 字符串模板
Here is a simple way if you don't need IE/EDGE support如果您不需要 IE/EDGE 支持,这是一个简单的方法
$(`input[id=${x}]`).hide();
or或者
$(`input[id=${$(this).attr("name")}]`).hide();
This is a es6 feature called 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" />
String Concatenation字符串连接
If you need IE/EDGE support use如果您需要 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 DOM 中的选择器作为数据属性
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" />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.