如何在jQueryselect器中使用JavaScriptvariables

我如何使用JavaScriptvariables作为jQueryselect器中的参数？

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

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

Answer 2

 var x = this.name; $("input[id=" + x + "]").hide(); 

当你使用一个ID，这将performance更好

 $("#" + x).hide(); 

---

我强烈build议您更具体地使用通过button点击来隐藏元素的方法。 我会select使用数据属性。 例如

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

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

不工作， 因为它应该 。

你甚至可以这样做：

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

Answer 4

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

Answer 5

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

Answer 6

1. ES6string模板

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

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

   要么

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

   这是一个名为模板string的es6function

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