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

Program / 글쓴이

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 기능입니다.

    코드 스 니펫 표시

  1. 문자열 연결

    IE / EDGE 지원이 필요한 경우

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

    코드 스 니펫 표시

  1. 데이터 속성으로 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();

    코드 스 니펫 표시

답변