如何在 jQuery 選擇器中使用 JavaScript 變量？

Question

如何在 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等於被單擊元素名稱的元素。

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

$(`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"淡出一組元素。

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

---

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

---

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