다음과 같이 할 수 있는지 궁금합니다.
HTML
<div id="myspace" class="thing"></div>
<div id="mytable" class="thing"></div>
JS
document.getElementById('my'+this).on('click', function(){
document.getElementById(this).innerHTML = 'Chosen';
});
논리는 첫 번째는 myspace, 두 번째는 두 개의 상자가 있다는 것 mytable입니다. 둘 중 하나를 클릭하면 상자의 innerHTML에 "Chosen".
기본적으로 여러 클릭 이벤트 및 / 또는 if 문을 작성하지 않아도되는지 확인하고 싶습니다.
JSFiddle https://jsfiddle.net/7cLu9uah/
공통 이벤트 처리기를 부모에 연결 한 다음 한 번의 클릭 처리기에서 클릭 한 항목에 대해 작업하여 위임 된 이벤트 처리로이를 수행 할 수 있습니다.
document.getElementById("container").addEventListener('click', function(e) {
e.target.innerHTML = 'Chosen';
});.thing {width: 100px; height: 20px; background:red; margin: 10px;}<div id="container">
<div id="myspace" class="thing"></div>
<div id="mytable" class="thing"></div>
</div>또한 코드에서 .on()DOM 요소 를 사용하려고했습니다 . 작동하지 않습니다. 아마도 당신은 평범한 자바 스크립트와 .on()메소드 가있는 jQuery를 혼동하고 있었을 것입니다.
그리고 document.getElementById()찾으려는 요소의 ID와 일치해야하는 문자열을받습니다. 귀하의 코드 ocument.getElementById('my'+this)는 적절한 사용법이 아닙니다.
이와 같은 DOM 조작은 종종 jQuery 라이브러리를 사용하여 더 간단하며 .NET과 함께 일부 jQuery 구문을 사용하려는 것 같습니다 .on(). 다음은 jQuery에서 수행 할 수있는 작업입니다.
$(".thing").on("click", function() {
this.innerHTML = "chosen";
}).thing {width: 100px; height: 20px; background:red; margin: 10px;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="myspace" class="thing"></div>
<div id="mytable" class="thing"></div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다