How to use JavaScript variables in jQuery selectors?
JavascriptJqueryJavascript Problem Overview
How do I use JavaScript variables as a parameter in a jQuery selector?
<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.
Javascript Solutions
Solution 1 - Javascript
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();
});
Solution 2 - Javascript
$(`input[id="${this.name}"]`).hide();
As you're using an ID, this would perform better
$(`#${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
// 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.
Solution 3 - Javascript
$("input").click(function(){
var name = $(this).attr("name");
$('input[name="' + name + '"]').hide();
});
Also works with 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();
Solution 4 - Javascript
var x = $(this).attr("name");
$("#" + x).hide();
Solution 5 - Javascript
$("#" + $(this).attr("name")).hide();
Solution 6 - Javascript
-
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
<!-- begin snippet: js hide: true -->
<!-- language: lang-js -->
(function($) {
$("input[type=button]").click(function() {
var x = $(this).attr("name");
$(`input[id=${x}]`).toggle(); //use hide instead of toggle
});
})(jQuery);
<!-- language: lang-html -->
<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" />
<!-- end snippet -->
- String Concatenation
If you need IE/EDGE support use
$("#" + $(this).attr("name")).hide();
<!-- begin snippet: js hide: true -->
<!-- language: lang-js -->
(function($) {
$("input[type=button]").click(function() {
$("#" + $(this).attr("name")).toggle(); //use hide instead of toggle
});
})(jQuery);
<!-- language: lang-html -->
<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" />
<!-- end snippet -->
-
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" />