- 전체
- HTML
- Web Design (웹디자인)
- XE 응용 개발
- wordpress plugin dev
- Javascript & JavaScript Application
- MEAN Stack : full stack javascript
- angular js & ionic framework
- bootstrap
- WebGL, Three.js and Babylon.js
- restful api design
- mobile web
- node.js 응용
- Cloud Service 응용
- 웹 어셈블리 개발 [WASM, WebAssembly]
- 마이크로서비스, MSA (microservice architecture)
- WebGL / WebGPU
- next.js 개발
- micro frontend (마이크로프론트앤드)
- 전자상거래/쇼핑몰
- 서버 클라우드 (aws, azure, google)
HTML class 여러개 - jquery 선택자에서 javascript 변수를 사용하는 방법
2019.03.04 19:43
class 여러개 - jquery 선택자에서 javascript 변수를 사용하는 방법
3 Answers
$(`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>
그런 다음 자바 스크립트에서
// 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" 을 사용하여 요소 컬렉션을 페이드 아웃 할 수 있습니다.
찾기 attr 변경
jquery selector에서 매개 변수로 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 x = $(this).attr("name");
$("#" + x).hide();
-
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" />
-
문자열 연결
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" />
-
데이터 속성으로서 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" />
[출처] https://code.i-harness.com/ko-kr/q/59e700
본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
