Làm cách nào để sử dụng các biến JavaScript trong bộ chọn jQuery?

Làm cách nào để sử dụng các biến JavaScript làm tham số trong bộ chọn jQuery?

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

Về cơ bản những gì tôi muốn làm là có thể ẩn phần tử có phần tử idbằng với tên của phần tử đang được nhấp.

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

HOẶC bạn có thể làm một cái gì đó như thế này.

var id = this.id;
$('#' + id).hide();

HOẶC bạn có thể cho một số hiệu ứng cũng.

$("#" + this.id).slideUp();

Nếu bạn muốn xóa toàn bộ thành phần vĩnh viễn tạo thành trang.

$("#" + this.id).remove();

Bạn cũng có thể sử dụng nó trong này cũng.

$("#" + this.id).slideUp('slow', function (){
    $("#" + this.id).remove();
});

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

Khi bạn đang sử dụng ID, điều này sẽ hoạt động tốt hơn

$(`#${this.name}`).hide();

Tôi đặc biệt khuyên bạn nên cụ thể hơn với cách tiếp cận của bạn để ẩn các yếu tố thông qua các lần nhấp vào nút. Tôi sẽ chọn sử dụng các thuộc tính dữ liệu thay thế. Ví dụ

<input id="bx" type="text">
<button type="button" data-target="#bx" data-method="hide">Hide some input</button>

Sau đó, trong JavaScript của bạn

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

Bây giờ bạn hoàn toàn có thể kiểm soát phần tử nào bạn đang nhắm mục tiêu và điều gì xảy ra với phần tử đó thông qua HTML. Ví dụ: bạn có thể sử dụng data-target=".some-class"và data-method="fadeOut"làm mờ dần một tập hợp các phần tử.

$("input").click(function(){
        var name = $(this).attr("name");
        $('input[name="' + name + '"]').hide();    
    });   

Cũng hoạt động với ID:

var id = $(this).attr("id");
$('input[id="' + id + '"]').hide();

khi, (đôi khi)

$('input#' + id).hide();

không hoạt động, như nó nên .

Bạn thậm chí có thể làm cả hai:

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

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

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

1. Mẫu chuỗi ES6

   Đây là một cách đơn giản nếu bạn không cần hỗ trợ IE / EDGE

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

   hoặc là

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

   Đây là một tính năng es6 được gọi là chuỗi mẫu

   Hiển thị đoạn mã

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

   Chạy đoạn mãẨn kết quả

   Mở rộng đoạn trích

2. Nối chuỗi

   Nếu bạn cần hỗ trợ IE / EDGE, hãy sử dụng

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

   Hiển thị đoạn mã

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

   Chạy đoạn mãẨn kết quả

   Mở rộng đoạn trích

3. Bộ chọn trong DOM làm thuộc tính dữ liệu

   Đây là cách ưa thích của tôi vì nó làm cho bạn mã thực sự KHÔ

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

   Hiển thị đoạn mã

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

   Chạy đoạn mãẨn kết quả

   Mở rộng đoạn trích