jQuery 선택기에서 JavaScript 변수를 사용하는 방법은 무엇입니까?

jQuery 선택기에서 JavaScript 변수를 사용하는 방법은 무엇입니까?

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클릭하는 요소의 이름과 동일합니다.

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

$(`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"요소 집합을 페이드 아웃합니다.

$("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();

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

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

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

언급URL : https://stackoverflow.com/questions/5891840/how-to-use-javascript-variables-in-jquery-selectors